DeltaFrog Posted March 26, 2022 Share Posted March 26, 2022 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 More sharing options...
Cassie Posted March 26, 2022 Share Posted March 26, 2022 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! Quote 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). 1 Link to comment Share on other sites More sharing options...
DeltaFrog Posted March 26, 2022 Author Share Posted March 26, 2022 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 More sharing options...
Cassie Posted March 26, 2022 Share Posted March 26, 2022 Ok! Let's figure this out together. Could you explain 'not working' for me, because it's doing what I would expect. What are you expecting? Link to comment Share on other sites More sharing options...
DeltaFrog Posted March 26, 2022 Author Share Posted March 26, 2022 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 More sharing options...
Solution Cassie Posted March 26, 2022 Solution Share Posted March 26, 2022 Interesting! This is the behaviour I'm getting. Kapture 2022-03-26 at 21.43.33.mp4 Are you maybe trying to jump more quickly to that point? I've added a duration too now See the Pen 5da9f953d8f257831205df0d59bba5d8?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
DeltaFrog Posted March 26, 2022 Author Share Posted March 26, 2022 Thank you! Looks like its working as desired now! Yay! 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