zidzad1 Posted March 7 Share Posted March 7 Hi, I have a horizontal scroll animation that works fine but I wanted a delay to the start so the user actually has time to read it before it just starts snapping, so I did that by adding the "+=0.25" which does give it a delay, but it messes the whole logic of the snap by not snapping to exactly my sections.. please help. See the Pen WNWrwyO by zidzad1 (@zidzad1) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted March 7 Solution Share Posted March 7 Hi @zidzad1 and welcome to the GSAP Forums! The issue here is merely a mathematical one, nothing messed up here. First, snap works based on percentage values between 0 and 1. So when you pass a value of 0.333 (1/3) to the snap value ScrollTrigger will snap it's progress to 0, 1 and every value that is a multiple of 0.333 in between, so it goes like this: 0 - 0.333 - 0.667 - 1, so that snaps to every slide without any issues. Your tween is 1 second so the left side of the first slide will be at the left of the screen at 0 seconds. The left side of the second slide will be at the left side of the screen at 0.333 seconds and so forth. Now when you add a delay the left side of the first slide will be at the left of the screen at 0.25 seconds, so there are 0.25 seconds where the first slide doesn't move. Then the slides start to move. The left side of the second slide will be at the left of the screen at around 0.583 seconds, the left side of the third slide will be at the left side of the screen at around 0.917 seconds 🤯. Finally the left side of the fourth slide will be at the left side of the screen at 1.25 seconds, so you have to feed the snap config an array with the percentages of each slide which are very different than 0.333 for each slide, see the problem? Here is a fork of your demo with a dynamic approach to this: See the Pen xxeZONE by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 3 Link to comment Share on other sites More sharing options...
zidzad1 Posted March 14 Author Share Posted March 14 On 3/7/2024 at 10:07 PM, Rodrigo said: Hi @zidzad1 and welcome to the GSAP Forums! The issue here is merely a mathematical one, nothing messed up here. First, snap works based on percentage values between 0 and 1. So when you pass a value of 0.333 (1/3) to the snap value ScrollTrigger will snap it's progress to 0, 1 and every value that is a multiple of 0.333 in between, so it goes like this: 0 - 0.333 - 0.667 - 1, so that snaps to every slide without any issues. Your tween is 1 second so the left side of the first slide will be at the left of the screen at 0 seconds. The left side of the second slide will be at the left side of the screen at 0.333 seconds and so forth. Now when you add a delay the left side of the first slide will be at the left of the screen at 0.25 seconds, so there are 0.25 seconds where the first slide doesn't move. Then the slides start to move. The left side of the second slide will be at the left of the screen at around 0.583 seconds, the left side of the third slide will be at the left side of the screen at around 0.917 seconds 🤯. Finally the left side of the fourth slide will be at the left side of the screen at 1.25 seconds, so you have to feed the snap config an array with the percentages of each slide which are very different than 0.333 for each slide, see the problem? Here is a fork of your demo with a dynamic approach to this: Hopefully this helps. Happy Tweening! Great, amazing, this works perfectly on PC however on mobile it's very buggy. The problem is only with the start and end sections... which for some reason seem to push it down at the start and end .So esentially the view snaps to the top at the end and to top top at the start in a weird way. The other sections work fine. It's fine on codepen, just buggy on mobile, i've attached some screenshots of what it looks like. Link to comment Share on other sites More sharing options...
Rodrigo Posted March 15 Share Posted March 15 Hi, Sorry to hear about the issues you're having, but there is not a lot we can do without a minimal demo that clearly illustrates the problem. Maybe this is tied to the address bar hiding/showing on mobile devices, so you could try using the ignoreMobileResize config option: ignoreMobileResize if true, vertical resizes (of 25% of the viewport height) on touch-only devices won't trigger a ScrollTrigger.refresh(), avoiding the jumps that can happen when the start/end values are recalculated. Beware that if you skip the refresh(), the start/end trigger positions may be inaccurate but in many scenarios that's preferable to the visual jumps that occur due to the new start/end positions. ScrollTrigger.config({ ignoreMobileResize: true, }); https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config() Or you can try normalizeScroll(): https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted March 15 Share Posted March 15 I would also recommend making sure you're using the latest version of GSAP/ScrollTrigger. Your demo uses a VERY old version. 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