Jump to content
Search Community

How to make auto scrolling image repeat

Billy Brown
Moderator Tag

Recommended Posts

Billy Brown
Posted

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.

Posted

 

Hey there Billy!

 

Welcome to the forums. ?

this thread may help 

 

  • Like 1
Billy Brown
Posted

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

Posted

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

Billy Brown
Posted

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?

Posted

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

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

 

Billy Brown
Posted

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.

Billy Brown
Posted

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
Posted

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

  • Like 2
Billy Brown
Posted

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

Thanks so much for all your help Cassie!

  • Like 1
  • 3 weeks later...
Posted

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.

nico fonseca
Posted

@Billy Brown  you have a typo erro in the ease property, is "circ.out" not "circa.out". 

Posted

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?

Posted

I assume you want something like this: 

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

?

  • 2 weeks later...
Posted

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

Posted

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.

 

?

Posted

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?

Posted

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. 

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