Jump to content
Search Community

Smooth infinite loop (Y axis)

kcgsap test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello,

 

I'm relative new to gsap and coding in general, yet I managed to create some cool animations.

However I cannot pull this one off.

 

I want to make the lines of code come down from the top of the screen to the end of the screen in a smooth way (Y). I'm stucked if you guys have some material/insights that can help me out, it would be great!

 

Thanks in advance!

 

Inspiration of this project / shout out to:

header-banner--optimized.svg

gsap_test.svg

See the Pen bGYQoRe by jfilipeferreira96 (@jfilipeferreira96) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @kcgsap :)

 

Welcome to the forum.

 

I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger.

 

See the Pen mdqQxrO by PointC (@PointC) on CodePen

 

For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this.

 

See the Pen rNYQdGb??editors=0110 by PointC (@PointC) on CodePen

 

If you need a primer on clipPaths and masks you can check out my training site.

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

  • Like 5
Link to comment
Share on other sites

18 minutes ago, PointC said:

Hi @kcgsap :)

 

Welcome to the forum.

 

I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger.

 

 

 

 

For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this.

 

 

 

 

If you need a primer on clipPaths and masks you can check out my training site.

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

Thank you, the last example is just perfect! I will give it a try. And again thanks!

Link to comment
Share on other sites

On 3/1/2022 at 9:32 PM, PointC said:

Hi @kcgsap :)

 

Welcome to the forum.

 

I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger.

 

 

 

 

For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this.

 

 

 

 

If you need a primer on clipPaths and masks you can check out my training site.

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Hopefully that helps. Happy tweening and welcome aboard.

:)

Hello,

I'm using Inkscape to create clipPaths however my browser does not read/show the items that belong to that group. Do you have any solution for that?

Thanks!

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