321dev Posted July 20, 2021 Share Posted July 20, 2021 The first codepen shows the working starting point. Just an animation with a scrolltrigger. See the Pen ZEKJrXO by trogmaniac (@trogmaniac) on CodePen Now i'd like a longer scrollarea (600px) and i want the animation to trigger every 100px. This is my attempt here: See the Pen qBRqqQX by trogmaniac (@trogmaniac) on CodePen I don't quite understand why the start of any following triggers are not directly after any previous one. Somehow i suspect that's because of the space that's added by the pinning, but i don't know how to cope with that. See the Pen by (@) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 21, 2021 Solution Share Posted July 21, 2021 Yeah, that's a tricky one because you're pinning the same thing over and over and that affects the triggering position of subsequent ones. In other words, if you pin something for 100px, it has to push the trigger point of the next one 100px down too because it's basically stationary for that amount of time. I personally wouldn't keep pinning the same element over and over - I'd pin once and do all my animations in an associated timeline. You can even drop callbacks into a scrubbed timeline like this: See the Pen JjNyxgv?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
mikel Posted July 21, 2021 Share Posted July 21, 2021 ... another option if you want to scrub the rotation too. See the Pen WNjEBpq?editors=0010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
321dev Posted July 21, 2021 Author Share Posted July 21, 2021 Thanks a lot to both of you for your answers. @GreenSock Just to understand what you've done: You added 6+1 arbitrary entries to the timeline and that lead to the total scroll range to be divided into 6 equal parts? Is there a way to make the animation run backwards when scrolling up? Link to comment Share on other sites More sharing options...
GreenSock Posted July 21, 2021 Share Posted July 21, 2021 4 hours ago, 321dev said: @GreenSock Just to understand what you've done: You added 6+1 arbitrary entries to the timeline and that lead to the total scroll range to be divided into 6 equal parts? Not "arbitrary", but yes, equally-spaced so that they just hit at specific increments. I control the pixel distance simply with the end value, like "+=600" means 600 / 6 = 100 each. 4 hours ago, 321dev said: Is there a way to make the animation run backwards when scrolling up? Sure, just tap into the scrollTrigger's direction: tl.scrollTrigger.direction > 0 ? tween.restart() : tween.reverse() See the Pen OJmxNqY?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
321dev Posted July 21, 2021 Author Share Posted July 21, 2021 @GreenSock thanks, but it plays the animation only once when scrolling upwards. Link to comment Share on other sites More sharing options...
GreenSock Posted July 21, 2021 Share Posted July 21, 2021 If you want it to jump to the end and play, that's easy - just add a 0 to the reverse(): tl.scrollTrigger.direction > 0 ? tween.restart() : tween.reverse(0) There are actually a lot of ways you can code this. I'm just offering one here 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