sosilver Posted July 12, 2021 Share Posted July 12, 2021 Hello, I have a timeline that is being controlled by scrollTrigger using scrub. Rather than have the scrollTrigger start the animation sequence at a progress of 0 and complete at 1 would it be possible to define the values for the starting or ending point of the animation for use with scrollTrigger? I would like to take my timeline and define its starting point / starting frame to already be 10% of the way into the animation or a progress of 0.1. Then if a user would scroll up, scrollTrigger would not go lower than 0.1 progress of the timeline animation. For example: lets say a circle moved 100 pixels left over 10 seconds. How could I setup a scrollTrigger timeline such that I could define the start of the animation to a progress of .1 (10 pixels to the left) and end at .9 (90 pixels to the left). const master = gsap.timeline({ start: 0.1, end: .9, scrollTrigger:{ trigger: '#dod', start: "20% 0%", end:"+=4000", target: "#dod_diagram", anticipatePin: 0.1, //markers: true, scrub: 0.2, pin: true, pinSpacing: true, onUpdate: self => console.log("progress:", self.progress) } }); Thank you for any suggestions! 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 12, 2021 Solution Share Posted July 12, 2021 Heya @sosilver! You can tween the progress of a tween or Timeline. It's probably one of my favourite GSAP tricks. That may be a nice solution. ☺️ See the Pen JjNbyGv?editors=1010 by GreenSock (@GreenSock) on CodePen 5 Link to comment Share on other sites More sharing options...
sosilver Posted July 12, 2021 Author Share Posted July 12, 2021 Hi Cassie, this technique worked great. Thanks for the tip! 2 Link to comment Share on other sites More sharing options...
Cassie Posted July 12, 2021 Share Posted July 12, 2021 Hooray! Happy I could help. 🥳 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