Component

Overview

The KUTE.js Component is a standard JavaScript Object that contains all functions, values and all information that the Animation class expects in order to properly initialize the complete animation setup for one property or a category of properties.

While it's still possible to register new components the old fashioned way, the Animation class brings all the convenience for a consistent development strategy.

Main Structure:

• component : allows you to set a component name, must be unique and different with the existing components.
• category / property : sets the component category name or the single supported property name and changes how the Animation class handles the associated functions below.
• properties / subProperties : sets the components' supported properties for category type components or sub-properties for components like transformFunctions or filterEffects.
• functions : the object that holds the functions required by the component for the KUTE.js execution context. Some functions can be set for one property, a category or each property independently.
• Util : various utility functions and other value processing constants required for the component processing, post processing and animation.
• Interpolate : an object that specifies what interpolation functions are required for one property, category, or each property in a category or each sub-property for special components.

Single Property Component Structure

// single property component
const componentNameOptions = {
    component: 'componentName',
    property: 'propertyName', // clip, backgroundPosition, scroll, etc
    defaultValue: propertyDefaultValue,
    Interpolate: {numbers,colors,arrays...},
    Util: {util1,util2...}
    functions: {
        prepareStart: function(){},
        prepareProperty: function(){},
        onStart: function(){},
        onComplete: function(){},
        crossCheck: function(){}
    }
}

Multiple Property Component Structure

// multiple property component
const componentNameOptions = {
    component: 'componentName',
    category: 'categoryName', // boxModel, borderRadius, colors, etc
    properties: ['prop1','prop2'...], // some transform components use subProperties
    defaultValues: {prop1: value1, prop2: value2....},
    Util: {util1,util2...}
    Interpolate: {numbers,colors,arrays,...},
    functions: {
        prepareStart: function(){},
        prepareProperty: function(){},
        onStart: {
            prop1: function(){},
            prop2: function(){},
            // .................
        }
        onComplete: function(){},
        crossCheck: function(){}
    }
}

Initialize your component

import Animation from `../animation/animation.js`
let ComponentName = new Animation( componentNameOptions )

Check the kute.js/src/components/crossBrowserMove.js custom component for a reference.