Dave Dublin Posted September 16, 2022 Share Posted September 16, 2022 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 More sharing options...
mvaneijgen Posted September 16, 2022 Share Posted September 16, 2022 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"); 3 Link to comment Share on other sites More sharing options...
Dave Dublin Posted September 16, 2022 Author Share Posted September 16, 2022 ok thanks 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