HumbleB Posted February 25, 2022 Share Posted February 25, 2022 (edited) I'm still new to GSAP and trying to using ScrollTriggers. In my demo I have a Carousel with Slides. As you scroll down, the Carousel should pin in place and you should see the slides scrolling horizontally into view. When the slides moves into place it should pin in place and run its animation ie. the black box should moves all the way to the right -> until it's off screen. Then the next slide slides into view and repeat. Right now I can see the box is moving but then the whole carousel flashes and starting scrolling really fast. See the Pen ZEaMyXY by HumbleB (@HumbleB) on CodePen Edited February 26, 2022 by HumbleB Added CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 25, 2022 Share Posted February 25, 2022 Hi Humble, That's a lot of React code to go through. It would be better if your demo was just vanilla JS so we could clearly focus on the issue at hand. I'm not entirely sure what you're going for here, but it sounds like you might want to use a containerAnimation if the animation is dependent on another ScrollTrigger. 1 Link to comment Share on other sites More sharing options...
HumbleB Posted February 26, 2022 Author Share Posted February 26, 2022 Thank! I converted it to the CodePen and used the containerAnimation. It's almost doing what I want it to do but there's two problem is that I want the slides to pin and stop in place until the box's animation is done and the last slide in goes by too fast. It seems that last slide goes too fast because the carousel has unpinning before it finished. And the slides aren't pinning because their movements are being controlled by scrolling the carousel. I'm stuck on how to achieve what I want. 1 Link to comment Share on other sites More sharing options...
akapowl Posted February 26, 2022 Share Posted February 26, 2022 6 hours ago, HumbleB said: It seems that last slide goes too fast because the carousel has unpinning before it finished. That is because you are using a scrub with a value of 1 - so you are telling the animation to take 1 second to catch up with the position of the scrollbar, which means that the scrollbar can be past the point of unpinning, while the animation has not finished yet. If you want it to end exactly at the time/position of unpinning but still to be smooth, I guess your best option would be to add smooth-scrolling to the whole page and use a scrub: true for the fake-horizontal scrolling instead, as to be seen in the example below (I added the smoothScroll() ScrollTrigger native smooth-scrolling helper function to that, which is to be found in the .scrollerProxy() documentation). I also changed the tweens in your forEach loop to single .to() tweens instead of tweens that are added to the tl that you are creating at the beginning, because technically you are nesting multiple ScrollTriggers in different tweens of a timeline there, and that is one of the most common ScrollTrigger mistakes to be avoided. See the Pen MWOqQmX by akapowl (@akapowl) on CodePen With regard to the pinning of individual sections in such a fake-horizontal-scrolling scenario: As the docs say, it isn't available - that is because you are not actually scrolling horizontally, but only tweening the sections while scrolling vertically. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. Sidenote: You are missing the quotation marks on your carousel section - might want to change that <section class=carousel> 3 Link to comment Share on other sites More sharing options...
HumbleB Posted March 1, 2022 Author Share Posted March 1, 2022 Thanks for your help! Link to comment Share on other sites More sharing options...
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