Jump to content
Search Community

ScrollTrigger horizontal scrolling elements changing class of other elements (homemade scrollable carousel)

cotton test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

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. 

 

  • Like 4
Link to comment
Share on other sites

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