Jump to content
GreenSock

Dave Dublin

Snapping to label

Recommended Posts

Hi 

Is it possible, to be able to snap the scroll to a label in my timeline?

At the moment I have buttons that go to labels but I was wondering is there a setting that allows me to snap to these points if my manual scrolling is close to that point?

So for example, if Card 3 was almost at its end point, that it would automatically fully go to its end point.

 

Thanks 

Dave

See the Pen dyeYdRK by davedublin (@davedublin) on CodePen

Link to comment
Share on other sites

That is what the `snap:` property is for!

 

Take a look at the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

let tl = gsap.timeline({
    // yes, we can add it to an entire timeline!
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // pin the trigger element while active
      start: "top top", // when the top of the trigger hits the top of the viewport
      end: "+=500", // end after scrolling 500px beyond the start
      scrub: 1, // 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: "power1.inOut" // the ease of the snap animation ("power3" by default)
      }
    }
  });

// add animations and labels to the timeline
tl.addLabel("start")
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");

 

  • Like 3
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.
×