Jump to content
Search Community

Question of Infinite Text Animation

Daniyarkz test
Moderator Tag

Recommended Posts

Hello!
Please tell me how to refine the following functions for text animation:
1. I need two lines to move in different directions at different speeds
2. The animation slows down or breaks down, how to make it go smoothly?

3. How to make it stop when hover?
I have uploaded the code to Codepen, you can read the link:

See the Pen MWppyOe by Daniyar01 (@Daniyar01) on CodePen

Link to comment
Share on other sites

There's a helper function in the docs that might be very helpful - you don't even have to duplicate any elements. It does all the work for you:

See the Pen NWppbmq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can set a speed very easily. And since it returns a timeline, you can pause() and resume() it. In fact, you could even animate the timeScale so that it gradually slows down and speeds up on hover, like this: 

See the Pen jOBBVjr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Have fun!

  • Like 2
Link to comment
Share on other sites

1 hour ago, Daniyarkz said:

It remains only to understand how to adjust the movement in different directions with different speeds

I just updated the helper function to accept a "reversed" boolean value in the config object so you can easily tell it to go the other direction (it just reverses the timeline): 

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

 

And as I showed you, there's a "speed" configuration property that you can set. It should be quite easy but let us  know if something is unclear.

Link to comment
Share on other sites

Wow! Thank you so much! 

I'm still trying to understand the code, and you've already done, thank you so much!
The only thing you can explain, please, is how to make sure that the direction does not change with hover?
And then, after hover at the bottom line, it begins to move in a different direction

Link to comment
Share on other sites

Hey,

 

Here another hover version

 

See the Pen VwppJPg by mikeK (@mikeK) on CodePen

 

Only a little phenomenon

 

// works

wrap.addEventListener("mouseenter", () => { 
  marquee(thisLine, dur[i], from[i], 0.01)
})

// doesn't

wrap.addEventListener("mouseenter", () => { 
  marquee(thisLine, dur[i], from[i], 0)
})

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

6 hours ago, mikel said:

Only a little phenomenon

 


// works

wrap.addEventListener("mouseenter", () => { 
  marquee(thisLine, dur[i], from[i], 0.01)
})

// doesn't

wrap.addEventListener("mouseenter", () => { 
  marquee(thisLine, dur[i], from[i], 0)
})

 

@mikel that's because you keep creating new "action" timelines that are conflicting (bad). The last one created always "wins" because it renders last, but the others are still rendering and stacking up. When you set the timeScale() to 0 on the latest one, of course that one doesn't keep rendering because it's essentially paused, thus the LAST one you created is getting rendered. So it makes it appear as though the timeScale(0) didn't work but it actually did. The problem is the old/conflicting ones that were never properly killed or overwritten. Those are what continue to animate. 

 

Also, there's no such thing as "overwrite: true" on a timeline (that's just for tweens because those have "targets"). 

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Hello! Just wanted to ask a question. With that helper function, how can I (or if I can) change the direction of the text on scroll? I currently have an event listener checking for the scroll direction and updating a variable accordingly. I'm just not sure how to add that into the animation after it is initialized. 

Here is my codepen for reference, but it's basically the same as GreenSocks pen with just a few

tweaks: 

 

See the Pen NWvBNre by aeryla (@aeryla) on CodePen

 

Link to comment
Share on other sites

  • 4 weeks later...

Sure, there's a helper function in the docs that shows how to make it draggable:

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

 

Please keep in mind, though, that these free forums aren't really meant to be a "here are my requirements - please show me how to build it all" but we'd be happy to answer any GSAP-specific questions. The helper functions are intended to be a convenience - I hope this helps. 👍

 

If you need more detailed assistance beyond GSAP-specific questions, you can also post in the "Jobs & Freelance" forum to see if you can hire someone to help with your project. 

 

Good luck!

  • Like 1
Link to comment
Share on other sites

4 hours ago, GreenSock said:

Sure, there's a helper function in the docs that shows how to make it draggable:

 

 

 

Please keep in mind, though, that these free forums aren't really meant to be a "here are my requirements - please show me how to build it all" but we'd be happy to answer any GSAP-specific questions. The helper functions are intended to be a convenience - I hope this helps. 👍

 

If you need more detailed assistance beyond GSAP-specific questions, you can also post in the "Jobs & Freelance" forum to see if you can hire someone to help with your project. 

 

Good luck!

Thank you so much! But I have a last question, how can I paused this marquee on hover?

I refined the code a little, as a result it stops when pointing, but stopped changing direction when scrolling.

You can see the code on link:

See the Pen oNGxgBL by Daniyar01 (@Daniyar01) on CodePen

Link to comment
Share on other sites

  • 7 months later...
  • 7 months later...

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