slides carousel with parallax effect the work on scroll

[ahmedoabd]

2

 

I am trying to make a carousel that change slides on scroll, every slide contains 4 layers (background, flower , and a shape) what i want is on scroll the carousel change to the next slide but every layers should slides in efferent timing , exactly like this demo

 

I want when mouse scroll the image changes and a text fade in then on scroll again next image slides and the previous text fades out and new text fades in.

 

any one has any idea on how to do it please help me, thank you 😊

 

 

i have create the carousel and its working on scroll, but i don't know how to make efferent layers and animate their slide effect like the link above.

my code: Codepen

See the Pen ZEeVRmR by amo4oma (@amo4oma) on CodePen

[GreenSock]

I read your post a few times but I still don't quite understand what GSAP-specific question you're asking. Can you please clarify? 

 

We're happy to answer any GSAP-specific questions, but we don't have the resources to provide free general consulting or "build-to-order" solutions. 

 

If you need some GSAP help, please just provide a minimal demo that only has the absolutely essential code focused on your issue. Ideally it wouldn't be using 3rd party libraries - it looks like you may be using jQuery and a jQuery plugin (slick()?)

[ahmedoabd]

thank you for your replay, 

I am using GSAP ScrollTrigger to build a page, in this page there is a section that contain a carousel slider, every slide contain 3 layers (background, flower, and a girl object), and a text.

the UX for this section is when the user scroll the slider will move to the next slide  like this =>https://media.giphy.com/media/NVz6tAkrSajDt2tC2g/giphy.gif  

in this 👆  website the slides changes by clicking on the text, and what I want is to changes slides by scrolling down. so when scroll the slides change and a text fade on the right.

 

I hope my explaining is clear, and thank you again 😊 

 

[OSUblake]

Hi ahmedoabd, 

 

As Jack already stated, we don't have the resources to provide general consulting. We're here to help with specific GSAP questions.

 

I think you should take this one step at time. Focus on making the animation you want first.