Hi
I'm new to Greensock's amazing library and as such I'm struggling with some basic problems/concepts.
I have a rain animation that is in a infinite loop. When the user clicks a button I would like to stop the animation gracefully and play the next one.
By gracefully I mean the following:
Animation repeats one more time
Rains disappears
Rains stays hidden
My current solution is the following: When the user clicks on the button, I set repeat to 1 on all tweens.
const tweens = TweenMax.getTweensOf('.raindrop')
tweens.map(tween => tween.repeat(1))
This stops the animation, but the problem is, that the rain appears again after the animation has stopped. I guess it's because I use the clearProps property on the opacity.
const opacitySettings = {
opacity: 0,
ease: Linear.easeNone,
clearProps: 'opacity',
repeat: -1
};
How could I achieve the required behaviour?
Thanks in advance as I'm really stuck!
