astanar

oh snap I just saw the ScrollToPlugin. Guess I should use that. I just that this pen on another forum post: https://codepen.io/mikeK/pen/BeJzPw How would the script "know" where we are to trigger the right animation if we were to bind the section change to a mouse wheel (and not having a scroll behavior)?

Hello everyone, I'm new to javascript and gsap and I've been trying to animate a section change. So it has 3 sections: 1, 2, and 3. By default section 1 is visible since it is the first one that shows when you load the page. I made a script that looks for mouse wheel events and switches the class "is_active" depending on where we are. I've then attached a simple animation that looks for the "is_active" class to show the right section. The other ones become hidden. So far it works but I can't find a way to have the "show" animation to wait for the "hiding" one to finish before triggering. Also, if you scroll fast up/down all section will eventually be visible. How would I stop that from happening? Thanks!

it works! thank you very much!

hey, I'm trying to make a section disappear on click and another one show up. Setting the opacity to 0 goes smoothly but then the visibility of section2 goes super fast while I'd like it to be as slow as the first one. var section1 = document.getElementById("section1"); var section2 = document.getElementById("section2"); document.addEventListener("click", function(){ var tl = new TimelineLite(); tl.add( TweenLite.to(section1, 1, {opacity:0 , ease: Power0.easeNone}) ); tl.add( TweenLite.to(section2, 1, {visibility:'visible', ease: Power0.easeNone}) ); }); my css is currently this: selector { overflow-y: hidden; } #section2 { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; } Sorry if this seem stupid I'm new to all this. thanks