Question of Infinite Text Animation

[Daniyarkz]

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

[mikel]

Hey @Daniyarkz,

 

Welcome to the GreenSock Forum.

 

This could be an option 

 

See the Pen 0da7b4205d293ef613d8e93cbd5bcd54?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[GreenSock]

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!

[Daniyarkz]

Hi @mikel,

 

Thank you so much!

 

I studied on your answers and learned a lot new thanks to you!

 

Thanks to your answer, I think I understand how to make different directions, but I need him to stop when hover and not scroll.

 

I want to try to combine your solution with a @GreenSock

[Daniyarkz]

Hi @GreenSock,

 

Thank you so much for your cool decision!

 

To make inertia when braking is directly super!

 

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

[GreenSock]

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.

[Daniyarkz]

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

[GreenSock]

8 hours ago, Daniyarkz said:

The only thing you can explain, please, is how to make sure that the direction does not change with hover?

Ah, you'd just animate the timeScale to -1 instead of 1 in that case. I updated the demo: 

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

[Daniyarkz]

Thank you so much for your quick response and excellent solution! You helped me!

[mikel]

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

[GreenSock]

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

[mikel]

Hey Jack,

 

Thank you for your explanations.
Certainly this version might be better

 

See the Pen 9ce005bdad509ae1fed02cc107ad4421?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Aeryla]

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

 

[GreenSock]

@Aeryla I assume you wanted something like this?: 

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

[Daniyarkz]

On 11/11/2021 at 3:48 AM, GreenSock said:

@Aeryla I assume you wanted something like this?: 

 

 

Hello!
Great solution! Please tell me how to make it possible to dragging? And how to make him stop when pointing?

[GreenSock]

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!

[Daniyarkz]

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

[Cassie]

Hey @Daniyarkz,

I've simplified this down to one loop so it's a bit easier to read for now, popped some comments in there too, hope it helps.

See the Pen rNGxEvq?editors=0111 by GreenSock (@GreenSock) on CodePen

 

[Daniyarkz]

Hello @Cassie,

This is a great solution! Thank you so much!

 

[Ben Honcho]

This is amazing, what's the next step to get this on a motion path?

 

Like this? 

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

[GreenSock]

11 hours ago, Ben Honcho said:

This is amazing, what's the next step to get this on a motion path?

What exactly do you need help with, @Ben Honcho? 

[demiava]

Is there a vertically running version of this?

[Rodrigo]

Hi @demiava,

 

This should provide a good starting point:

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

 

If you have more questions, please remember to include a minimal demo.

Happy Tweening!

[demiava]

@Rodrigo Not just a starting point, but I could use it as it is too. Thanks a lot