CindyDB Posted August 28, 2020 Share Posted August 28, 2020 I have an item that fades into view on page load. Then I hide that item on scroll and show a next item. How do I show that initial item again when scrolling back up? let wl = gsap.timeline({ // yes, we can add it to an entire timeline! scrollTrigger: { trigger: "#welcome", pin: true, // pin the trigger element while active start: "top top", // when the top of the trigger hits the top of the viewport end: "+=100%", // end after scrolling 500px beyond the start scrub: true, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar snap: { snapTo: "labels", // snap to the closest label in the timeline duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity) delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping ease: "power3" // the ease of the snap animation ("power3" by default) } } }); // add animations and labels to the timeline wl.addLabel("textout") .to("#welcome .zoomtext", {duration: 1.5, opacity: 0}) .addLabel("btnin") .to("#welcome a.btn-round", {duration: .8, autoAlpha: 1}); Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 31, 2020 Share Posted August 31, 2020 Hey Cindy and welcome to the GreenSock forums. Your code above should show and hide your items depending on your scroll direction. Here's a demo that shows it working. Can you please try to modify my demo to recreate the issue that you're facing? 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