Jump to content
GreenSock

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

how to keep animating while ScrollTrigger no jumpy animation

Recommended Posts

How to create this animation like Cuberto Idea

Without jumpy at end of repeat and while ScrollTriggering or Scrub
and how to get scrollDirection with ScrollTrigger API

Cuberto use idiotWu scrollbar plugin for scroll direction
 

Screenshot (165).png

See the Pen XWdRWvQ by riccardo051 (@riccardo051) on CodePen

Link to comment
Share on other sites

Hey sadeghbarati007.  To create this effect you need to have a couple of key things:

  1. An animation that animates the text and wraps/loops perfectly.
  2. Something to track the scroll velocity (ScrollTrigger has a handy method for that) and tween the timeScale of the animation from 1) to speed it up and keep it going in the direction of the scroll.

That should be enough to get you started :) 

  • Like 3
Link to comment
Share on other sites

hope this Topic help others like me 

only thing It came to my mind:

pasue a timeline while scrolling ?
and then play it while no scrolling ?

  • Like 1
Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

Hey sadeghbarati007.  To create this effect you need to have a couple of key things:

  1. An animation that animates the text and wraps/loops perfectly.
  2. Something to track the scroll velocity (ScrollTrigger has a handy method for that) and tween the timeScale of the animation from 1) to speed it up and keep it going in the direction of the scroll.

That should be enough to get you started :) 

Thanks for quick response I'll check this out

Link to comment
Share on other sites

@ZachSaucier
Thanks for help getVelocity parameter helps me but
How to get best velocity size coz it's generate big number while scrolling and timeScale is gets really faster

getVelocity / 100 ?
Math helpers?

See the Pen mdPmOag by riccardo051 (@riccardo051) on CodePen




Many repetitive topics I see in Gsap fourm is how to get best wrapping loops and that my question too

Link to comment
Share on other sites

FYI this was already asked about here:

 

5 hours ago, sadeghbarati007 said:

How to get best velocity size coz it's generate big number while scrolling and timeScale is gets really faster
getVelocity / 100 ?

Ya, or even more like getVelocity / 1000 or some other formula you come up with. It depends on the feel that you want.

 

5 hours ago, sadeghbarati007 said:

how to get best wrapping loops and that my question too

Use modifiers. This post talks about how:

 

  • Like 1
Link to comment
Share on other sites

13 hours ago, sadeghbarati007 said:

also some Math helpers Returns NaN 🥱

Can you be more specific please? Are you saying that you think GSAP's utility functions have a bug that causes them to return NaN when they shouldn't? A minimal demo would be super helpful. 

Link to comment
Share on other sites

@GreenSock

See the Pen mdPmOag by riccardo051 (@riccardo051) on CodePen



Math code commented down below of js panel
looks like Math helpers some of them can't work with negative values so returns NaN

it's not Gsap error I just want to get best value from getVelocity with best helper you suggesting 
 

Link to comment
Share on other sites

11 hours ago, sadeghbarati007 said:

looks like Math helpers some of them can't work with negative values so returns NaN
it's not Gsap error I just want to get best value from getVelocity with best helper you suggesting 

Oh, right - that has nothing to do with anything in GSAP. Math.pow(-1, 0.2) returns NaN. Is there something GSAP-related you need some help with? 

Link to comment
Share on other sites

@ZachSaucier

@GreenSock

@OSUblake

@mikel

 

 

Hi again

 

how to update Modifier value with Scroll Direction ( not separate rightToLeft leftToRight wrap function )

 

coz its wrap just in one direction ( scrollTrigger direction ) if you change direction ( negative timeScale )  it stop at end of tween 

 

not keeping the loop continue 

 

 

another question how to use wrap without Absolute positioning

coz we may have different text and different width size in Scrolling container ?

 

 

can you guys do a favor and make a best solution for us its really hurts when you can't find solution 😭😭😢

Link to comment
Share on other sites

I wonder if you're looking for something like this(?): 

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

 

Keep in mind that repeat: -1 means to repeat [virtually] infinitely in the forward direction. If you reverse at some point, the playhead would eventually end up at the beginning and stop. That's very intentional, otherwise there could be logic problems with determining durations of ancestor timelines, as well as several other complexities. You can make it appear to go infinitely in reverse, you could push the playhead forward in an onReverseComplete, like iteration(100) or something. 

  • 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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×