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!

[fripi]

Hi,

 

this is a pretty old topic, but exactly what I need, I'm searching a much more recent version because when I try to replace the External Scripts from tweenmax to gsap it stops working...

Also I don't understand why snap is useful 🤔 just an svg with MotionPath could be better ?

[mvaneijgen]

 

Hi @fripi yep this is an old topic, 9 years old! Fun to read through though and still seeing familiar faces that are still active on the forum 💪

 

Being so old probably means that certain tools weren't available at this point in time. My advise would be create a minimal demo of your own where you try getting this off the ground with the tools you have access to now and then reverence this topic if need be. We have a migration guide, but maybe it is even beter to just start from scratch with the tools that are available right now and just use this topic as a reference for the general concept. Would love to see what you could come up with!

 

https://gsap.com/resources/3-migration

[fripi]

With a little search and a lot of inspiration of other pens I came to this

See the Pen zYbKadQ by fripi (@fripi) on CodePen

 

But when I pause my animTL at the creation and click on the button noting happens

if I don't pause the animation restarts every time I click

[mvaneijgen]

Wauw that was fast! Nice job 🎉

 

When working with timelines it is best to put all the logic on the timeline it self and not on the tweens of a timeline (even if you have just one tween on it), so moving the repeat, repeatDelay, and paused state to the timeline everything works as expected. Hope it helps and happy tweening! 

 

See the Pen xxBEJKV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[fripi]

OK thank you, that's indeed logic

Now I need to see if I can have multiple paths like the initial post of this thread