Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emjay

endless moving dots

Go to solution Solved by Cassie,

Recommended Posts

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-1.png


example-2.png

example-2.png

See the Pen gOxZvPa by emjay (@emjay) on CodePen

Link to comment
Share on other sites

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!
 

  • Like 5
Link to comment
Share on other sites

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 

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
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.
×