Hi everyone,
I'm learning ScrollTrigger and as experiment I'm trying to reproduce a simpler version of this slider https://robin-noguier.com/ however I'm having some issues in setting the right "start" and "end" parameters for the Scroll Triggers, I'm sure there is something wrong.
The idea is
There is container with position relative and height 100vh that should be pinned;
There are multiple slides with position absolute and top: 0, left: 0 that at the beginning have opacity set to 0;
The goal I'd like to achieve is the following
let's say the current viewport height is of 100px;
With regards to current scroll position, from 0 to 100px should be displayed Slide 1;
From to 100px to 200px should be displayed Slide 2 and so on;
After the last slide the scroll should continue to the following HTML elements;
I've also added two slide navigation buttons in the top left of the viewport, I've noticed that the animation triggered by the down button takes more time if compared with the one triggered by the up button. Also when from slide 3 is pressed the Up button to navigate to slide 2 there is a flickering.
In the attached pen there is the code I've written so far. Could you help me please?
Best regards
