OlivierD Posted April 8, 2021 Share Posted April 8, 2021 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 More sharing options...
OSUblake Posted April 8, 2021 Share Posted April 8, 2021 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 }); 3 Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2021 Share Posted April 8, 2021 A little advanced demo, but it shows spawning and recycling at work. Follow the mouse cursor is no different than following a predetermined path. See the Pen RLOzxo by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
OlivierD Posted April 8, 2021 Author Share Posted April 8, 2021 See the Pen eYgeRpV?editors=0010 by Bocfil (@Bocfil) on CodePen Canvas follow cursor and particles spawn after 2s but I don't find the setup to replay an animation from the start on demand : / Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 This is more of what I meant. See the Pen 47632fcb0a66c9fa0ea00f8f19e28a87 by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 Without using the mouse... See the Pen 9a26d061553ddbd6e49b02819fd02fdc by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
OlivierD Posted April 9, 2021 Author Share Posted April 9, 2021 Great ! The way it is done looks great and flexible ! I learned a lot, thanks Link to comment Share on other sites More sharing options...
OlivierD Posted April 9, 2021 Author Share Posted April 9, 2021 I'm trying to do a circular path now and while I'm satisfied with the rendering I doubt about the way I did it. I tried with your setup : update object value through a timeline but didn't succeed and I can't set an ease for example so I feel that something is wrong. See the Pen ZELvWvO?editors=0010 by Bocfil (@Bocfil) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 Hang on... maybe @GreenSock can shed some light on this because there was a way to do rotation with the directional rotation plugin, but that doesn't exist anymore. Link to comment Share on other sites More sharing options...
OSUblake Posted April 9, 2021 Share Posted April 9, 2021 Sans the plugin, here's how you can do it. I also threw in a radius animation to make it swirl. See the Pen 4d55a76827cc038da62a7710d8f9e04a by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
OlivierD Posted April 9, 2021 Author Share Posted April 9, 2021 ah, yes ... I had everything I need in the end. It seems so obvious now. I didn't think to use a timeline like that (duration 1 / angle 0 -> 360). That's really cool ! thanks again 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now