thednp / kute.js

KUTE.js is a JavaScript animation engine for modern browsers.

Home Page:http://thednp.github.io/kute.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ES6/ES7 development roadmap

thednp opened this issue · comments

Hello there.

I'm working on a new ES6/ES7 version of KUTE.js, some changes so far:

  • massive code changes, some objects re-purposed, others renamed or removed, but we can have it all delivered nicely via rollup, for any configuration and purpose. warning this can potentially break your custom properties, the documentation will be updated to help you fix them
  • massive code simplification in terms of value processing, especially for transform
  • scroll property have been reworked so that when bundled, it will include all it's component required functions in order to work; added supportPassive for scroll eventHandler, the component also won't require additional CSS styling for the body, it will just work
  • the library now features Components, the old plugins have been split in pieces for a more modular bundle potential; for instance the boxModel model which includes all possible box-model CSS properties, or transformFunctions to handle your regular CSS3 transform (translate,rotate,scale,skew) animations
  • added an Animation class to register new components into the library, coming in 3 variations: a class with minimal (works with pre-made tween objects), standard (provides all input value processing functionality required by components' properties) and development (provides helpful and sometimes critical information developing new components), the last two will also make sure you can't register same property multiple times; also these two variations allow you to register new defaultOptions, defaultValues and even new interpolate functions
  • added a new TweenCollection class to take care of allTo and allFromTo animations, totally revamped and made it able to handle array of elements not just HTMLCollection or NodeList
  • renamed callback options, EG complete => onComplete
  • all important objects are grouped and contained in an objects.js file
  • added support for new properties: transformMatrix, filter, boxShadow, as well as a new and powerful svgMorphCubic component to do some specific SVG morph animation
  • current morphSVG have been reworked for easier usage and more accurate value processing
  • KUTE.js comes with 3 flavors
    -> index-base.js with basic functionality, lightest in size, with included properties: scroll, transform, left, top, width, height, opacity, default easing functions, includes TweenBase constructor with start(), stop methods and only duration, easing, and start, stop, update, complete callback options
    -> index.js with similar functionality as in core KUTE.js v1.6.2, except in v2.0.0 we've included all boxModel, borderRadius, textProperties, textWrite, clip, backgroundPosition and 2 new properties: CSS3 filter and boxShadow, then svgTransform, svgMorph, svgDraw, htmlAttr, also additions to prototype via Tween with added methods: pause(), resume() and yoyo, repeat, repeatDelay, chain, pause and resume callback options, as well as allTo() and allFromTo for TweenCollection class, this build also includes CubicBezier
    -> index.extra includes all in index.js plus additions to prototype via TweenExtra class having additional methods .to(), .easing(), .option(), .callback(), as well as a new and upgraded .update() method with per property options so that you can either do basic tween objects or timelines all with the same class (this one is a work in progress and will require changes to some interpolate functions);
  • text property has some improvements and reworks
  • added a Time.now() kind of polyfill to enable KUTE.js in node.js environment, thanks to new Tween.js versions, this stuff will need to be tested and confirmed by third party devs :)

This is a draft, expect changes