Jump to content
GreenSock

Daniyarkz

Question of Infinite Text Animation

By Daniyarkz, in GSAP. Views: 11,045

Moderator Tag

Recommended Posts

Posted

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
Posted

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
  • Author
Posted

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

Link to comment
Share on other sites
  • Author
Posted

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

Link to comment
Share on other sites
Posted
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
  • Author
Posted

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

Link to comment
Share on other sites
  • Author
Posted

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

  • Like 1
Link to comment
Share on other sites
Posted

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

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...
  • Author
Posted
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?

Link to comment
Share on other sites
Posted

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
  • Author
Posted
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...
Posted
11 hours ago, Ben Honcho said:

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

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

Link to comment
Share on other sites
  • 7 months later...
Posted

Is there a vertically running version of this?

Link to comment
Share on other sites
Posted

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

  • Like 1
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account