scrolltrigger ScrollTrigger - Can't get to end of timeline?

[Douglas]

Hi! Hoping to get a hand if possible, realizing of course that sans a codepen URL the first thing you'll likely say is "Codepen example please". So please bear with me as it's 2am so I'm going to describe my issue as best I can since building it out in Codepen would take a while.

 

Long story short, I've built an animation and it works fine just playing the timeline, no ScrollTrigger involved. However when I add ST, it for some reason doesn't play all the way through. Logging to the console the ScrollTrigger's "self" onUpdate reveals that it always stop at the same "progress": 0.9283...

 

Basically all I'm trying to do is create a site with horizontal scroll based on gsap animating everything in from the right offscreen, using xPercent from +100 to -100.

 

I'll drop some code in here and maybe hopefully someone can go "Oh yeah you're using THIS thing wrong!".

 

Timeline init:

let tl = gsap.timeline({
        scrollTrigger: {
            trigger: "main",
            pin: true,
            scrub: 1,
            start: 0,
            end: "+=" + 10000,
            onUpdate: (self) => console.log(self),
        },
        defaults: { ease: "none", duration: 1 }
    });

 

Some sample animations in the timeline:

// Animate out the landing page
    const landingSection = gsap.utils.toArray("#landing");
    tl.to(
        landingSection,
        {
            opacity: 0,
            duration: 0
        },
        10
    );

// Animate in the case studies
    const caseStudySections = gsap.utils.toArray(".case-study");
    caseStudySections.forEach(function(e, i) {
        tl.fromTo(
            e,
            {
                "clip-path": "inset(0 0 0 " + (100 - caseStudySections.length * 10 + i * 10) + "%)",
            },
            {
                "clip-path": "inset(0 0 0 0%)",
                duration: 10
            },
            i*20
        );
    });

const plainFullScreenSection = gsap.utils.toArray("#plainFullScreenSection");
    tl.fromTo(
        plainFullScreenSection,
        {
            xPercent: 100
        },
        {
            xPercent: -100,
            duration: 20
        },
        "-=" + 17
    );

 

[Douglas]

Little extra info as I play with it, trying to resolve:

 

It seems that the whole timeline will scrub through, MINUS whatever my last animation added to the timeline is. I THINK it might be that the final section/div is coming on-screen and triggering the end that way maybe? I can add as many animations to the timeline as I want and it extends as long as is needed, except for whatever is the last animation. 

 

For now I've forced it to play nice by adding an empty div which is 100% width and having THAT be the last thing animated. This makes the actual last animation run just fine, and I'm only "missing out" now on the invisible div. Definitely not ideal, especially since I have a progress bar on the site and that's not accurate at the moment because of this, but the page "works".

[ZachSaucier]

Hey Douglas and welcome to the GreenSock forums.

 

I'm guessing it's because your end position for the ScrollTrigger is never reached because it's out of bounds of your page's scrolling range. But that's a complete guess given the lack of info/a demo   

 

Making a CodePen demo is not just for our benefit. It's also for your benefit because it forces you to break the problem down and figure out where it's coming from. Most of the time I find that when I do that I figure out what the problem is myself!

[Douglas]

On 8/13/2020 at 9:25 AM, ZachSaucier said:

Hey Douglas and welcome to the GreenSock forums.

 

I'm guessing it's because your end position for the ScrollTrigger is never reached because it's out of bounds of your page's scrolling range. But that's a complete guess given the lack of info/a demo   

 

Making a CodePen demo is not just for our benefit. It's also for your benefit because it forces you to break the problem down and figure out where it's coming from. Most of the time I find that when I do that I figure out what the problem is myself!

 

Hey, thanks for the response, and sorry for the delay getting back. Here's a demo:

 

See the Pen VwajXNd by DouglasGlover (@DouglasGlover) on CodePen

 

Like I say, I may simply be doing something totally wrong here, but it just doesn't finish the timeline, even with this very simple demo. Ideas?

[ZachSaucier]

It's exactly what I guessed it was above: your end position for the ScrollTrigger is never reached because it's out of bounds of your page's scrolling range. This is because you have end: "+=" + (window.innerWidth + 1000) which puts the end position 1000 px + the viewport's width after the start (in this case when your main element reaches the top of the page). There's definitely not enough scrolling in your demo to reach that position in most cases.

 

To see that it's working properly, just add a big height on your body (to increase the amount of scrolling) like body { height: 5000px; }.

[Douglas]

Great, that makes sense! I was using "main" as the container AND the trigger, and it's height was showing as zero. In my project I changed the trigger to the first element and it's resolved the issue.

 

Thanks!