@karlnp thanks, now i understand! So you do something like this:
const tweenAnimationSource = () => new TimelineMax()
const timelineAnimationSource = ({target}) => TweenMax.to(target, 1, {x: 50})
//....
const tween = this.addAnimation(tweenAnimationSource)
const timeline = this.addAnimation(timelineAnimationSource)
timeline.add(tween)
Although i don't see why do you want to do this instead of this:
const animationSource = ({target}) => new TimelineMax().to(target, 1, {x: 50})
//....
this.addAnimation(animationSource)
I think i should hide the non controlling API methods like add()
Can you tell me your use case?
@karlnp
other problems: when creating and managing animations while within for loops, i am having to wrap everything in IIFE's in order to avoid concurrency problems with the generated animations
I'm not sure what you're doing here but but to avoid any possible side effects the animationSources should be pure function which are take the target
and the options
, create a GSAP Animation, and return it. Something like:
const moveCoins = ({target, options}) => new TweenMax().staggerTo(target.findAll({type: 'coin'}, 1 , {x: options.x, y: options.y}))
//...in the component
handleClick(event) {
this.addAnimation(moveCoins, 1, {
x: event.clientX
y: this.props.coinY
})
}