Jump to content
GreenSock

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

Infinity Vertical SVG Animate

Go to solution Solved by OSUblake,

Recommended Posts

Hello, 

Recently started my adventure with greensock and i tryin do infinity animation my svg background text. I tried to edit other examples when carousel was horizontal but this animation doesn't work properly. I need smooth animation but my animation seems to reset every now and then.. I don't see problem in my code.. Would anyone have any comments that could help me?

See the Pen YzxXgrb by Landrynadre (@Landrynadre) on CodePen

Link to comment
Share on other sites

Welcome to the forums @Landrynadre

 

I glanced at your code and it appears to be animating precisely as I'd expect - can you provide an example or further describe what exactly you mean by "smooth" and how you want it to loop? Currently, you've got things set up so that once it gets to a y position of exactly -230, it'll jump back to 0 and keep going...until the raw (unwrapped) y number hits 800 less than it was when you started, at which point everything will start again. 

 

This looks like a logic issue in your code, but I'm just not sure exactly what you want it to look like (hence my request for a visual demo or elaboration about what you're looking for). 

Link to comment
Share on other sites

  • Solution

It would probably make it a lot easier if you draw everything at 0 and then set the position. 

 

See the Pen LYjVvYw by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

I would like the elements that go beyond the view to come back down, so that the effect would be that this text keeps going up all the time and never ends. Now, as you noticed, the elements will reach the specified value, so the animation restarts and there is a jump. If necessary, I can send a link to the page where I noticed that someone is making such animations without using gsap. Is there any way to avoid this re-starting you mentioned?

Link to comment
Share on other sites

5 minutes ago, OSUblake said:

It would probably make it a lot easier if you draw everything at 0 and then set the position. 

 

 

 

 

This is the "smoothness" effect I mean, I will try to extend it so that the text appears more randomly in the x-axis.

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