animate *MAGIC SPARKLES* along a path onClick (for multiple instances)

[Guest leelou]

Thanks, I appreciate the help and I understand the need to keep the focus on GSAP.

 

I have the two paths working. Would you or one of your teammates mind helping me out with the GSAP and understanding how to:

 

1. Only have the animation of dot/sparkles show on click? They start playing on page load and I can restart the animation by clicking the button but I'd rather it only show when the button is clicked.
2. What is the proper way to use the OnComplete function? I am trying to make them fade out once the animation is complete.

Thanks and here is my codepen: 

See the Pen LAJFz by leelou (@leelou) on CodePen

[Carl]

maybe this will help:

 

http://codepen.io/GreenSock/pen/6b7295b2d636df65830ff32b59537964/

 

the tweens that move the emitters (big green circles) are paused on load

when those tweens complete they call a hideDots() function which gets passed a className paramter.

the className parameter is used to target all the dots associated with a particular emitter.

in order for this to work each dot is given an additional class when its created based on its emitter like

"dot emitter1" or "dot emitter0"

 

See code comments for more

[Guest leelou]

Ahh! Fantastic.

Thanks for the code notes and example. Very helpful!