Jump to content
Search Community

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

Guest leelou
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

maybe this will help:




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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...