Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
skipper42

Is is possible to calculate a scroll trigger end position?

Recommended Posts

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

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

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

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

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

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.

  • Like 2
Link to comment
Share on other sites

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

@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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×