Jump to content


ScrollTrigger vertical slider

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello everyone and thanks in advance for those who want to help me.
I am new to the GreenSock world and am trying to reproduce a vertical slider as you can see in the CodePen example.
However, I cannot understand how to make the text of the first (lorem ipsum) disappear when the second slide appears.
I've tried to do this with a simple toggleClass, but it doesn't work and I don't understand where I'm fossilizing.
Can you help me? Thank you

See the Pen MWXaZPm by WNDR (@WNDR) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @WNDR welcome to the forum! 


I'm not completely sure what you are trying to do and what all your code is for. I personally always like to start with a timeline that controls my animation. I then setup the animation I want (here I rotate your text and animate it to opacity 0, this is just to illustrate that it is working), then when I'm happy with the animation I add ScrollTrigger to that timeline. I have found that the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.


I see you set position: sticky; with CSS, this seems to work, but I personally like GSAP to handle all this for me with the pin property https://greensock.com/docs/v3/Plugins/ScrollTrigger/pin 


I also advise you to take a look at all the ScrollTrigger demos, there is a lot there to help you get off the ground


Hope it helps and happy tweening! 


See the Pen dyKYEdb?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

Link to comment
Share on other sites

Hi @mvaneijgen and thanks for your answer!!

My hitch was (and still is) in the misunderstanding with what was triggered: it is a concept that I still struggle to fully understand.
I activated the second section (# section-context-second) and then it didn't work.
Anyway your example fits perfectly: I simply had to give opacity 0 to the text, or toggle a class to hide it, but I couldn't do it.
I'm learning directly about a project that will go into production shortly, so your advice to first try animating and then inserting ScrollTrigger is also a great point of view.

Link to comment
Share on other sites

  • 2 weeks later...

Hello again,
I resume this topic to ask another question.

I updated the initial codepen by inserting a new "slide" and other elements as you can see here:

See the Pen MWXaZPm by WNDR (@WNDR) on CodePen

Please ignore the aesthetics, it is for demonstration purposes only 😅


It seems that on some Windows (with resolution 1536×714) the scroll from the second slide to the third leads directly to the fourth slide (the one with a black background and the two links).
I work on a Mac and even if I simulate the resolution indicated, I cannot replicate the problem.

Anyone have any idea why this happens?


Thank you

Link to comment
Share on other sites

I think your goToSection(i) function seems to do something weird. I disabled it and everything seems to behave like I think is should. But I'm also on a Mac, so I can't see the issue you're talking about. There shouldn't really be an issue on the OS level, maybe the browser they are using is the issue?

  • Like 1
Link to comment
Share on other sites

Hi and thanks again for the help.
With your suggestion it seems to have resolved itself.
The person who reported the problem to me uses Chrome like me, but even trying from other completely clean browsers he found the same bug .... who knows!
Anyway it is now fixed and works perfectly.

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.