Douglas Posted August 13, 2020 Share Posted August 13, 2020 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 ); Link to comment Share on other sites More sharing options...
Douglas Posted August 13, 2020 Author Share Posted August 13, 2020 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". Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 13, 2020 Share Posted August 13, 2020 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! Link to comment Share on other sites More sharing options...
Douglas Posted August 18, 2020 Author Share Posted August 18, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 18, 2020 Share Posted August 18, 2020 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; }. 1 Link to comment Share on other sites More sharing options...
Douglas Posted August 18, 2020 Author Share Posted August 18, 2020 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! 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