Jump to content
Search Community

Add Snap to ScrollTrigger to sections

DeltaFrog test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hello everyone! 

How do I add a snap on my pen?   Currently when the user scrolls the mouse the sections animate opacity in and out but don't snap to the right moment in the timeline.  Id like the mouse to snap into place when each charts is fully visible at 100% opacity.   This code pen here 

See the Pen BaJjyKR by mvaneijgen (@mvaneijgen) on CodePen

 looks like it has everything I need to get it working right but I'm having a hard time applying a it to my current setup.   Can anyone help?   Thanks!




See the Pen 8b80a3a1a391b7eda5d2e311d7e8c385 by chriscalabrese (@chriscalabrese) on CodePen

Link to comment
Share on other sites

Sure thing, nice and simple!


You have three 'sections' or steps to your animation, so you want it to snap every 1/3 of the way through = snap: 0.33


If you're uncertain about how a demo works, always check out the docs! They're chock full of info.


Hope this helps!

snap Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:
  • Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1).
  • Thanks 1
Link to comment
Share on other sites

Thanks so much for the quick reply Cassie!,


I added the "snap: 0.33," but it doesn't seem to be working.   What am I doing wrong here?   

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".outter",
    start: "center 50%",
     end: "bottom top",
     markers: "true",
    scrub: 1,
    snap: 0.33,
    pin: true


Should I be following this pen closer 

See the Pen BaJjyKR by mvaneijgen (@mvaneijgen) on CodePen

  and creating an array or can I do without?  

Link to comment
Share on other sites

Thanks so much, you are amazing,  let me see if I can explain better.    When the user stops scrolling I want the animation to snap to spots where only 1 of the 4 charts are displaying 100% opacity.   Currently if I stop scrolling the mouse the timeline will stop and display 2 charts at a % of transparency which is not desired.  The animation should only snap to spots on the timeline where only 1 chart has full opacity.  :)


For example this screenshot shows chart 1 and 2 and they are at about 50% opacity, the mouse is not being interacted with at the time of screenshot.  The next screenshot shows the 4 charts at full opacity for reference.    



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