Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Billy Brown

How to make auto scrolling image repeat

Recommended Posts

I'm playing around with an autoplaying image that is affected by the users scroll velocity.

I was wondering how I could make the image repeat? ie. there will be no gap in the animation

See the Pen KKmXoqa by benjaminchallenor (@benjaminchallenor) on CodePen

Link to comment
Share on other sites

 

Hey there Billy!

 

Welcome to the forums. 🥳

this thread may help 

 

  • Like 1
Link to comment
Share on other sites

Unfortunately the above link didn't help solve my issue.

Link to comment
Share on other sites

Sorry, @Billy Brown, but I don't really understand your question. We'd be happy to answer any GSAP-specific questions, but if you're looking for more custom consulting about logic issues that's not typically what these forums are for. Please see the Forum Guidelines

Link to comment
Share on other sites

I've updated my pen: 

See the Pen KKmXoqa by benjaminchallenor (@benjaminchallenor) on CodePen

 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

Sure, in your onUpdate(), put this at the bottom: 

gsap.to(tl, {timeScale: 1, overwrite: true});

 

Link to comment
Share on other sites

Thanks for that Jack. 

I've updated my pen 

See the Pen KKmXoqa by benjaminchallenor (@benjaminchallenor) on CodePen

 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

Thanks Cassie!  that's exactly what I was looking for.

 

Would you be able to help with the issue that after a couple of loops the image appears to 'jerk' backwards, as if the images aren't lined up correctly in the loop?

 

  • Like 1
Link to comment
Share on other sites

You'll need to make sure that the image is positioned properly. The start needs to be visually the same as the end position so that when it loops it's seamless.

I adjusted your css here

See the Pen a3d036ac26d30e4155483f9204ba68e9 by cassie-codes (@cassie-codes) on CodePen

  • Like 2
Link to comment
Share on other sites

The trick to this kind of thing is stepping back from the JS and getting the layout nailed down

  • Like 2
Link to comment
Share on other sites

Thanks so much for this Cassie. Is there a way to keep the loop correctly aligned on window resize? Currently the loop breaks and only aligns again on refresh.

  • Like 1
Link to comment
Share on other sites

Thanks so much for all your help Cassie!

  • Like 1
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

I assume you want something like this: 

gsap.to(tl, { timeScale: 1, ease: "power1.inOut", duration: 2, overwrite: true });

?

Link to comment
Share on other sites

  • 2 weeks later...

See the Pen KKmXoqa by benjaminchallenor (@benjaminchallenor) on CodePen

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.

×