[slides carousel with parallax effect the work on scroll]

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 😊 

 

[slides carousel with parallax effect the work on scroll]

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

[scroll animation & fullpage.js expert needed for a landing page]

@Sofia_Grace I have sent you my email by a private message 

[scroll animation & fullpage.js expert needed for a landing page]

1- to create a landing page with fullpage scrolling pages like this page https://koox.co.uk/home

2- add animation to the pages on entering the page and on leave.

3- from the 4rth page of (the fullpage scrolling) the website will have turn to normal scrolling and a nav bar will appear. 

4- there will be slider carousel in the normal scrolling part.

and that's it    

[Fullpage.js animation the page before going to the next page]

 I am trying to make animation to the page that user will leave, so i have used this code to delay the scrolling to the next page so that the animation work before changing the page, the problem is that user have to scroll only once and wait for the animation to start and the page to change, and when i keep scrolling (using the mouse wheel or touch pad) the animation loops and never changed, you can see the code pen that i created, do not stop scrolling to understand what is the problem.

• what i what is to make animation when leaving the second page so when you at the second page and scroll down the animation start then the page changed.

• what is happening is when you scroll now the animation keep looping until the stop scrolling which is a bad user experience

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