Jump to content

Dave Dublin

Snapping to label

Recommended Posts


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.




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
  .from(".box p", {scale: 0.3, rotation:45, autoAlpha: 0})
  .from(".box", {backgroundColor: "#28a92b"})
  .to(".box", {rotation: 360})


  • 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.