soraya

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 http://codepen.io/sorayao/pen/domJvY 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