Jump to content
Search Community

How to make auto scrolling image repeat

Billy Brown test
Moderator Tag

Recommended Posts

I've updated my pen: Updated link The image is now auto looping and going in a single direction. The image scrolls at the speed the user scrolls, however it stays at that velocity. Is there a way I can get it to go back to a default velocity of '1' once the user stops scrolling?

Link to comment
Share on other sites

Thanks for that Jack. 

I've updated my pen here I've added to more 'images' that now scroll in alternating directions. However the animations aren't starting at the same time and only begin to work when I scroll up and down. Do I need separate timelines as well as separate fromTo's for each image?

Also after a couple of loops the image appears to 'jerk' backwards, as if the images aren't lined up correctly.

It would be great if I could get some advice on the above.

Link to comment
Share on other sites

  • 3 weeks later...

Hi, I was wondering if there is away to make a smoother transition from where I'm setting the scroll velocity to when I revert back to 

gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true });

I added a delay with "duration: 3" which makes it a bit smoother however adding a an ease 

gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true, ease: 'circa.out' });

doesn't seem to make any difference.


Any help would be greatly received.

Link to comment
Share on other sites

Thanks nicofonseca, I have "circ.out" in my code, just an error in my message. Still doesn't seem to have any affect in the transition from the updated velocity to the default gsap.to(tl, { timesScale: 1, duration: 3, overwrite: true, ease: 'circ.out' });

Is there a way to achieve a smoother transition?

Link to comment
Share on other sites

  • 2 weeks later...


Hi, I'm trying to change the duration of my animation at different breakpoints.

I'm using ScrollTrigger.matchMedia to set up my media queries however when I resize my browser to check the 2 different durations the animation becomes jerky. Could anyone provide any help to where I might be going wrong? Preview link provided

Link to comment
Share on other sites

The problem is that you create a timeline (tl) once and then keep adding to it whenever the breakpoints fire. That's definitely not good - you'll end up with conflicting/competing tweens. You're also creating only one ScrollTrigger outside the matchMedia breakpoints. The whole point of ScrollTrigger.matchMedia() is to create those inside the breakpoints so that they get killed/recreated when appropriate. 


You can also return a function that'll get called when the breakpoint no longer matches, so you can .kill() your timeline in there for example.


I think you meant to do something more like this: 

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



Link to comment
Share on other sites

Thanks for this Jack. When going from a +800px breakpoint to a -800px breakpoint and back again the first and final images don't revert back to their set duration of 10 but stay on a duration of 30 set by the smaller media query and appear jerky. Could you advise on this?

Link to comment
Share on other sites

The duration does change. But since you're using .from() tweens, when they get reverted that puts them back to the "from" values and then when your other matchMedia() runs and tries to do a .from() they're already at the same value. You can use ScrollTrigger.saveStyles() to force those to revert to the original. Here's a fork: 

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


I'd strongly recommend making sure you're using the latest version of GSAP/ScrollTrigger too. 

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.
  • Create New...