Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

ScrollTrigger Vertical Slider

Recommended Posts

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

See the Pen VwKEvQM by DavidMonnuar (@DavidMonnuar) on CodePen

Link to comment
Share on other sites

Hey David and welcome to the GreenSock forums. Good job so far! 


These forums are intended for specific questions about GSAP. Unfortunately we don't have the capacity to help fix the logic of every project that uses GSAP in some way. But here are some tips:

  • Instead of creating a new animation every time a section is entered or left, I would try creating a single timeline all of your transitions at the start (and recreating it on resize) and animate through it instead. This will not only help fix logical issues but will be slightly better for performance. My article about animating efficiently talks more about that but there's not an example in it specifically applied to a slider like this.
  • If you choose not to use a single timeline, you need to make sure to overwrite any conflicting animations that you have. 
  • The delay that you have when clicking buttons sometimes is because the animation doesn't get fired directly based on the click, it's based on the scroll position. And since you're animating the scroll position it can sometimes take some time to reach the point at which the animation should run.

If you have a specific question please let us know and we'll do our best to help :) 

  • Like 1
Link to comment
Share on other sites

Hi @ZachSaucier,


I've followed in depth your suggestions and guidelines and I was able to fix the issues.


Thank you very much :D

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.