[Tween through array]

I want to create a timeline of data where the dom is static (virtualized) but using tweening to run through an array of objects.

I think the stick to finger part is fine, but when doing a flick gesture you need something that will give a bit of physics to the scrolling.

 

To do this i was wondering if one can tween through a array of objects and on update updated the relevant dom objects.

Are there any examples of something like that?

[TweenMax systemjs]

When i started with systemjs i had difficult understanding how be best introduce non packed libraries like greensock to my ES6 application. I also have a paid for subscription so the JSPM install will not work for me as it is and could not get it installed using jspm install greensock anyway.

 

I figured out a really simple way of doing this and hope it might be useful to some of you.

 

1. Configure config.js 

in paths define where library folder is (shorthand your mapping...)

"lib:*": "library/*"

under map add a named item to where your greensock dependency is at.

"TweenMax": "lib:greensock/TweenMax.min"

2. use it in your es6 file by importing it.

import 'TweenMax';

3. animate

    play(rect, color) {
        return new Promise(function(resolve) {            
            this.setLocation(rect, color).then(() => {
                let animationDetails = {
                    attr: {
                        opacity: 0,
                        r: this.animationRadius
                    },
                    onComplete: resolve
                };
                
                this.tween = window.TweenMax.to(this.circle, 0.5, animationDetails);                
            });
        }.bind(this));        
    }