[Smooth infinite loop (Y axis)]

It's fine I managed to edit your svg clipPath from a circle to a retangule and by doing that I got the clipPath working. It's just perfect!

[Smooth infinite loop (Y axis)]

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!

[Smooth infinite loop (Y axis)]

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!

[Smooth infinite loop (Y axis)]

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:

gsap_test.svg

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