Carousel animation by scrolling and clicking on dots

[Oleh Koval]

I can't figure out how to make the carousel right when scrolling. 

For example ScrollTrigger (trigger: ".carousel-outer", start: "center center")
After that we scroll down the carousel is fixed and the slides are changed. Just as it works now when we click on the dots. 

Help me please!

See the Pen RwKjXYL by oleh-koval (@oleh-koval) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. Your carousel is pretty cool.

 

Unfortunately it isn't set up in a way that makes it easy for ScrollTrigger to control it.

 

The only way to change slides is to click a button. ScrollTrigger typically controls a timeline's progress as you scroll. You don't have a timeline. You have 3 buttons doing specific animation actions.

 

I see some options for you

 

Option 1: recreate your carousel so that all animations are in a single timeline and hook it up to a ScrollTrigger

 

Option 2: create a singular function that advances to any slide something like goToSlide(2). Tell each circle button to call that function and pass in the appropriate slide index. In addition you may need multiple ScrollTriggers set up to call that function when they enter the viewport. I haven't thought this out fully yet.

 

Regardless of which direction you take you also need to make sure that when you click a button to change slides that the scroll position changes accordingly.

 

This awesome free demo shows how to have a carousel driven by scroll and multiple navigation buttons

 

See the Pen bGexQpq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

The code is quite clever and I understand about 80% of it after studying it for 20 minutes or so. To do what I think you are asking for is fairly advanced and something that I'm guessing would take me multiple hours to figure out. Unfortunately we just can't build stuff for you but hopefully some of this makes sense and helps you take a new direction.