cotton Posted October 22, 2021 Share Posted October 22, 2021 I've created a scrollable 'carousel' that goes horizontal as you scroll. I'd like each slide as it enters to affect the .dot pagination that it corresponds to by adding an active class to it. The slide count is dynamic so I've added an individual id to each which is also added as a data-panel attribute to the .dots. Sure it's going to be something really simple but I can't see the wood for the trees so any guidance would be appreciated. See the Pen OJjbZGe by Cottonltd (@Cottonltd) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 22, 2021 Solution Share Posted October 22, 2021 Hey there @cottoncreative You are mixing jQuery with vanilla JS a bit there, so I would suggest just sticking to vanilla JS here for now. This is your example cleaned out and corrected a bit, and complemented by the new containerAnimation property in the ScrollTriggers for your dots, which helps enormously with triggering animations on individual elements in a fake-horizontal-scrolling scenario as yours. Hope that helps See the Pen ba638948806ca4adca9dae41178f29c1 by akapowl (@akapowl) on CodePen From the ScrollTrigger docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 4 Link to comment Share on other sites More sharing options...
cotton Posted October 22, 2021 Author Share Posted October 22, 2021 Would you look at that! Thanks @akapowl, really appreciate the time spent tidying up my JS too. 2 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