emjay Posted November 17, 2021 Share Posted November 17, 2021 Hallo, I am trying to implement the following with GSAP: I have an SVG graphic with dots, you can see the file in the embedded pen. I would like to move these dots to the top right. (see example-1.png) The white area is the viewbox of the svg file. When moving to the top right, new dots should appear at the bottom, of course. Since I plan to make the whole thing endless, the question is how to accomplish this. Do I animate the path of each dot in a timeline from bottom left to top right and then bring it back to the start position at the bottom left when it is out of the viewbox with .set()? In the second image (example-2.png) you can see that I also plan to make the dots smaller before they leave the viewbox. So that there are no clipped dots when they move out of the viewbox. Of course the same goes for the dots coming back in from the bottom. At the end it would be great to scroll this timeline with scrolltrigger. But basics first. I would appreciate some input on how best to proceed. Thanks a lot in advance Martin example-1.png example-2.png See the Pen gOxZvPa by emjay (@emjay) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 17, 2021 Share Posted November 17, 2021 Hey @emjay Effects like this are largely visual trickery! See the Pen gOxZzXy by GreenSock (@GreenSock) on CodePen The dots are equally spaced so if you move each dots up to the position occupied by the next row you can just loop it and it'll look like it's endless. Hope this helps! 5 Link to comment Share on other sites More sharing options...
emjay Posted November 24, 2021 Author Share Posted November 24, 2021 Hello @Cassie, it took me a few days to find the time to read through your answer and create my animation with your input. And I have to say, you've put me on exactly the right track. Here you can find the final animation. I am happy with it. Do you see any potential for improvement? See the Pen eYEwWKz by emjay (@emjay) on CodePen Thanks again for your input 2 Link to comment Share on other sites More sharing options...
emjay Posted November 24, 2021 Author Share Posted November 24, 2021 Hello @Cassie, The next step I wanted to do after the animation was working was to integrate ScrollTrigger. That actually works too, however I can't get the speed of the dots under control. Have a look at the following pen. It looks like it is flickering. Do you have any ideas about this? See the Pen JjyQyKQ by emjay (@emjay) on CodePen Thanks again Martin 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted November 24, 2021 Solution Share Posted November 24, 2021 Heya again Martin! ☺️ So you're trying to link an infinite animation to a finite scroll distance. 'scrub' means 'tie the animation progress directly to the scroll' If you make it loop 10 times it works fine. Sidenote - you don't need toggleActions and scrub - they're for conflicting use cases. toggleActions controls how the animation behaviour is handled at certain toggle points, with scrub, the animation is just tied to scroll so you don't have those options available. See the Pen OJjejZx?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
emjay Posted November 24, 2021 Author Share Posted November 24, 2021 Heya @Cassie, Of course, that makes total sense. I could have thought of that myself. But I didn't question the individual tweens anymore, but played with the durations and different scrub values. And yes, I forgot to remove the toggleActions. Thanks for that hint as well. Have a nice day Cassie. Martin 1 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