skipper42 Posted July 2, 2021 Share Posted July 2, 2021 I'm having a hard time understanding how "duration" on tweens and "start/end" values on scroll trigger work together. I want my tween durations to be a percentage of the total scroll distance. If I have this: var master = gsap.timeline({ scrollTrigger: { trigger: ".animation-start", start: "top 20%", end: "+=2800", scrub: true, }, }); Within master I have added other timelines, and each timeline has tween (durations). How do I say, "I want this tween to be 20% of the total timeline, and this tween to be 10%...?" What's the best way to do this? Link to comment Share on other sites More sharing options...
OSUblake Posted July 2, 2021 Share Posted July 2, 2021 Hi skipper! Don't think about duration as time. Think about it in percentages. gsap.timeline({ scrollTrigger: {} }) .to(foo, { duration: 100 }) .to(bar, { duration: 40 }, 10); Can you tell what's going to happen. The foo animation is going to be played for entire scroll distance. The bar animation is going to start 10% of the way in. 5 Link to comment Share on other sites More sharing options...
skipper42 Posted July 6, 2021 Author Share Posted July 6, 2021 Hi. Yes, however how does this work for nested timelines? I'm following the example from modularize your animation code. From this example, each panel is a timeline with multiple tweens. How do I get tweens to run for X percent of the WHOLE timeline (e.g. master)? Thank you. Also, can you clarify, "The foo animation is going to be played for entire scroll distance." These tweens run in succession, "foo" first, then "bar", so how can one play for the entire scroll distance? Link to comment Share on other sites More sharing options...
Cassie Posted July 6, 2021 Share Posted July 6, 2021 Those tweens don't run in succession. foo will start, then at 10% of the way through the scroll distance bar will play, (note the position parameter) In terms of nested timelines - timelines don't themselves have a 'time' - they're just containers. So the master timeline would just take on the length of the longest tween or timeline you add to it. 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 6, 2021 Share Posted July 6, 2021 If you're battling to wrap your head around it I would recommend 1) Make a simple timeline with scrollTrigger 2) And some markers for visual feedback - markers:true 3) Add scrub:true so that the timeline is linked right up to the scroll then play around with values. 2 Link to comment Share on other sites More sharing options...
skipper42 Posted July 6, 2021 Author Share Posted July 6, 2021 Thank you both for the assist. I wanted to slooooow my timelines down considerably (ie. lots of scrolling). I had to set massive durations (like in the thousands) on all the tweens. I also had to set a massive 'end' value on the scrollTrigger. It's working how I want now. This is the first time I'm using gsap with my company. Of course we have to go and create the most complicated animation to start with. 🙄 Thanks again. Link to comment Share on other sites More sharing options...
OSUblake Posted July 6, 2021 Share Posted July 6, 2021 5 minutes ago, skipper42 said: I had to set massive durations (like in the thousands) on all the tweens. Again, if you're scrubbing, the durations aren't real-time durations. They are ratios. To slow them down you just need to increase the scroll trigger's end. 2 Link to comment Share on other sites More sharing options...
skipper42 Posted July 6, 2021 Author Share Posted July 6, 2021 Oh yeah, I got ya. I can delete a couple zeros off those tween durations to make them less than 100. 1 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