Jump to content
Search Community

Visible item hides on scrolltrigger. How to show again when scrolling back up?

CindyDB test
Moderator Tag

Recommended Posts

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

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.
×
×
  • Create New...