I have the animation for my particles working pretty much as I want in terms of flying effect, color change and opacity and scale.
Now the issue is that all the particles are created from one single position.
What I am trying to achieve is, each time a particle is created, it is originated from a point along a bezier path ( see white square animation path for example)
I have managed to have each of my particle to be created in a div:id="particle"+i so they all have a single id
I guess what is needed not is to set the position of each div:id="particle"+i as a point on the variable path
animate dot particles on bezier path
in GSAP
Posted
Hi
I am trying to animate some particles along a bezier path in order to get a movement close the way the particles moves on this link
http://banners.bwmdentsu.com.au/aurora/
here is the codepen that I have created
See the Pen domJvY by sorayao (@sorayao) on CodePen
I have the animation for my particles working pretty much as I want in terms of flying effect, color change and opacity and scale.
Now the issue is that all the particles are created from one single position.
What I am trying to achieve is, each time a particle is created, it is originated from a point along a bezier path ( see white square animation path for example)
I have managed to have each of my particle to be created in a div:id="particle"+i so they all have a single id
I guess what is needed not is to set the position of each div:id="particle"+i as a point on the variable path
path = [{x:0, y:0}, {x:50, y:100}, {x:200, y:200}, {x:350, y:0}]
I have been stuck on this all day...
I am hoping for Jquery/GSAP guru to help me !
Many thanks
See the Pen domJvY by sorayao (@sorayao) on CodePen