Billy Brown

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

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?

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.

Thanks so much for all your help Cassie!

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.

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?

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.

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?

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

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