Jump to content
Search Community

Canvas particles animation - path

OlivierD test
Moderator Tag

Recommended Posts

Hello,

 

I'm a bit blocked, I tried differents things but I'm losing myself and don't know how to go with it.

In the codepen I kind of succeed to do what I want but the code isn't usable at all ...

I would like to do an animation of particles which looks like the codepen but which can be repeat -1.
I tried to create a "main object" which would follow the path and get his x and y pos to generate dynamically others particles or, as it is in the codepen, created my particles along the path with an opacity 0 and animate them in order to get the expected effect. I know it is not good but at least it can show you what I'm trying to achieve.

 

I found this 

See the Pen baLJvz?editors=0010 by osublake (@osublake) on CodePen

 through the forum but I'm still blocked : / 
Could you enlighten me ? Not a "codepen demo - answer", just some tips so I can try again if possible !

See the Pen dyNZoRj?editors=1010 by Bocfil (@Bocfil) on CodePen

Link to comment
Share on other sites

I wouldn't create the particles upfront. Instead, create them on-demand. Once you get more advanced, you can recycle particles.

 

So animate a simple object that follows the path. For simplicity, I would start by using mouse coordinates. Then at certain time intervals, you create particles at that position.

 

const cursor = { x: 0, y: 0 };

window.addEventListener("pointermove", e => {
  cursor.x = e.x;
  cursor.y = e.y;
});

gsap.ticker.add(() => {

  // render active particles
  
  // if a certain amount of time has passed
  // spawn more particles at the cursor's x/y position
});

 

 

  • Like 3
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...