WNDR Posted October 31, 2022 Share Posted October 31, 2022 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 More sharing options...
Solution mvaneijgen Posted October 31, 2022 Solution Share Posted October 31, 2022 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 More sharing options...
WNDR Posted October 31, 2022 Author Share Posted October 31, 2022 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 More sharing options...
WNDR Posted November 11, 2022 Author Share Posted November 11, 2022 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: 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 More sharing options...
mvaneijgen Posted November 11, 2022 Share Posted November 11, 2022 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? 1 Link to comment Share on other sites More sharing options...
WNDR Posted November 14, 2022 Author Share Posted November 14, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now