Billy Brown Posted July 22, 2021 Posted July 22, 2021 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.
Cassie Posted July 22, 2021 Posted July 22, 2021 Hey there Billy! Welcome to the forums. ? this thread may help 1
Billy Brown Posted July 22, 2021 Author Posted July 22, 2021 Unfortunately the above link didn't help solve my issue.
GreenSock Posted July 22, 2021 Posted July 22, 2021 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 July 23, 2021 Author Posted July 23, 2021 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?
GreenSock Posted July 24, 2021 Posted July 24, 2021 Sure, in your onUpdate(), put this at the bottom: gsap.to(tl, {timeScale: 1, overwrite: true});
Billy Brown Posted July 26, 2021 Author Posted July 26, 2021 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.
Cassie Posted July 26, 2021 Posted July 26, 2021 Heya Billy, If you want tweens on a timeline to start at the same time you need to use the position parameter to specify that. Does this help? See the Pen 9fd98b53682fd5e92e09ddffe064d29b?editors=0010 by cassie-codes (@cassie-codes) on CodePen.
Billy Brown Posted July 26, 2021 Author Posted July 26, 2021 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? 1
Cassie Posted July 26, 2021 Posted July 26, 2021 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. 2
Cassie Posted July 26, 2021 Posted July 26, 2021 The trick to this kind of thing is stepping back from the JS and getting the layout nailed down ✨ 2
Billy Brown Posted July 27, 2021 Author Posted July 27, 2021 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. 1
Cassie Posted July 27, 2021 Posted July 27, 2021 If you use xPercent instead of vw it'll work on resize See the Pen 1a2b0ff2191d5a71481028ef8acd9b61?editors=0111 by cassie-codes (@cassie-codes) on CodePen. 5
Billy Brown Posted July 27, 2021 Author Posted July 27, 2021 Thanks so much for all your help Cassie! 1
Billy Brown Posted August 14, 2021 Author Posted August 14, 2021 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 August 14, 2021 Posted August 14, 2021 @Billy Brown you have a typo erro in the ease property, is "circ.out" not "circa.out".
Billy Brown Posted August 14, 2021 Author Posted August 14, 2021 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?
GreenSock Posted August 14, 2021 Posted August 14, 2021 I assume you want something like this: gsap.to(tl, { timeScale: 1, ease: "power1.inOut", duration: 2, overwrite: true }); ?
Billy Brown Posted August 23, 2021 Author Posted August 23, 2021 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
GreenSock Posted August 24, 2021 Posted August 24, 2021 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. ?
Billy Brown Posted August 24, 2021 Author Posted August 24, 2021 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?
GreenSock Posted August 24, 2021 Posted August 24, 2021 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.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now