skipper42 Posted July 22, 2021 Share Posted July 22, 2021 Is it possible to calculate the end position of a timeline that consists of a bunch of other timelines, all of which use scroll trigger? I have an end number (scroll distance) plugged in, but I want it to be the combined scroll duration of each of the parts. What's the best way to go about this? Thanks. var master = gsap.timeline({ scrollTrigger: { trigger: ".animation-wrapper", start: "top 20%", end: "+=9500", // How do I calculate this value?? onUpdate: function(self) { gsap.to(".animation-progress",{ duration: 0, top: Math.abs(self.progress.toFixed(2) * 92) + "%", }) }, }, }); master .add( animation1() ) .add( animation2() ) .add( animation3() ) .add( animationEtc() ) Link to comment Share on other sites More sharing options...
GreenSock Posted July 22, 2021 Share Posted July 22, 2021 I think you might be misunderstanding how things work. Please read the part about how durations work: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub A few other notes: You said "all of which use a scroll trigger". It's logically impossible to have nested ScrollTriggers in a timeline with a ScrollTrigger. Either the parent timeline will control the playhead or the scroll position will - it can't be both. Did you just mean that all the sub-timelines don't have ScrollTriggers, but the master one does? That's totally fine. I noticed you don't have scrub: true set which means that your timeline will simply start playing when you reach the start position. Its progress won't be locked to the scrollbar position. It'll just keep playing even if you stop scrolling. Perhaps you meant to add scrub: true? I'm curious why you're doing a zero-duration .to() tween inside the onUpdate. You could simplify that to a .set() but I suspect you could make it even cleaner and more performant by just setting up a simple tween with the same start/end values: gsap.to(".animation-progress", { top: "92%", ease: "none", scrollTrigger: { trigger: ".animation-wrapper", start: "top 20%", end: "+=9500", scrub: true } }); If you still need some help, please provide a minimal demo and we'd be happy to take a peek. Good luck! Link to comment Share on other sites More sharing options...
skipper42 Posted July 23, 2021 Author Share Posted July 23, 2021 I'm using scrub on the inner timelines (the ones that also have scroll triggers). I'm using the master to display a progress bar of the total animation. However, the end value is slightly different based on screen resolution. I'm looking for a better way to "end" the timeline without putting in hard numbers. I tried setting an end trigger but the pinning causes this to not be reliable. Link to comment Share on other sites More sharing options...
GreenSock Posted July 24, 2021 Share Posted July 24, 2021 Hey @skipper42. I read your post a few times and...sorry, I'm lost. If you need more help with a GSAP-specific issue, please provide a minimal demo. Like I said, you definitely should not be nesting timelines with ScrollTriggers inside of a master timeline that also has a ScrollTrigger. It's logically impossible (not a limitation or bug in GSAP/ScrollTrigger). See Good luck! Link to comment Share on other sites More sharing options...
skipper42 Posted July 26, 2021 Author Share Posted July 26, 2021 I'm following the example from 'Use functions to create and return timelines' here, https://css-tricks.com/writing-smarter-animation-code/#use-functions-to-create-and-return-timelines If nesting timelines/scroll triggers is illogical then what is the best way to show a master progress bar that shows total duration of the animation? Thanks! Link to comment Share on other sites More sharing options...
Cassie Posted July 26, 2021 Share Posted July 26, 2021 If all of the inner timelines are scrubbed then surely there's a first 'start' position and a final 'end' position? If so you can set up a new tween for the scrollbar that starts at the position the first scrubbed animation starts, and ends at the position the last ends at. This is just an idea as I can't see how you're currently setting everything up. I suggest putting together a minimal demo if you'd like help that's tailored to your use case. 2 Link to comment Share on other sites More sharing options...
skipper42 Posted July 29, 2021 Author Share Posted July 29, 2021 When using end triggers, is it better to use a trigger that is pinned or one that is not pinned? Every time I use an end trigger that is outside the pinned area it scrolls up and doesn't accurately mark the "end" of the animation. Is there a recommended approach here? Link to comment Share on other sites More sharing options...
GreenSock Posted July 29, 2021 Share Posted July 29, 2021 @skipper42 pinning adds a significant layer of complexity on things, especially if you're pinning something more than once. Without boring you with a super long explanation, pinning can contaminate all the start/end positions of everything under that pin and it's critical that things get refreshed from top to bottom in order for it all to work. Given the choice, yeah, I'd pick things that aren't pinned. It's very difficult to troubleshoot blind, so if you've got a minimal demo that shows what you're talking about, that'd be swell. 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