ScrollTrigger doesn't always work properly

[MarwanAK10]

I'm using scrolltrigger to pin and scrub an element on a couple of pages. I'm trying to have the element scroll down the page as the user scrolls, then stop at a certain point. The issue is that it doesn't always scroll all the way down, and sometimes it doesn't render the full size of the element, especially on first load of the page, hence the incognito window usage. When the page is refreshed it works more often than not, however sometimes also doesn't work...

Please have a look at the following video to see what I'm talking about, please note the jumpyness of the element happens because I set a delay on the gsap function thinking it might help, but didn't. 

Using GSAP 3.9.1

GSAP code I'm using: 

function myGSAPToDelay() {
gsap.registerPlugin(ScrollTrigger);

gsap.to(".toTranslateY", {
    scrollTrigger: {
    trigger: ".toTranslateY",
        pin:".toTranslateY",
        start:"top center",
          end: () => `+=${window.getComputedStyle(document.querySelector('.lo-pro-timeline-control'), ':after').height}`,
        pinSpacing:false,
    scrub:true,
        pin:true
    /*markers: true*/                
},
});
}

const loproTimeout = setTimeout(myGSAPToDelay, 2000);

 

Link to a page (still a work in progress): https://www.ledrabrands.com/alphabetlighting/rgbw/

P.S I'm a Javascript and GSAP beginner. Please let me know if you need more info. Thanks! 

[SteveS]

This is extremely difficult if not impossible to debug without the code for the whole page. It's overwhelmingly likely that this is due to DOM content changing after the ScrollTrigger loads or just a general logic issue with how you are defining your end trigger.

 

1. I wouldn't register plugins inside of a function. I guess you can, but it's odd
2. You are animating your trigger and pinning it. Instead of making a tween, just use ScrollTrigger.create({...})
3. I'm not sure putting everything in a timeOut is helping you. Make sure you are executing your GSAP after the DOM loads

 

[MarwanAK10]

Thank you for your reply, SteveS. 

The timeout function was intended to solve the issue of content loading/changing after the script had loaded in case that was the culprit, but that didn't work. I've moved the script to after the body and added the following code, but no change. 

document.addEventListener('DOMContentLoaded', function() {
   // same GSAP code here
}, false);

I will look into your suggestions #1 and #2 as they're not clear to me at the moment. Thanks again. 

[GreenSock]

Yeah, it smells like somehow you're making DOM changes after ScrollTrigger does its refresh() on "load". It's extremely difficult to troubleshoot a live site - there are just way too many factors at play. We'd be happy to take a look at a minimal demo that reproduces the issue on CodePen in the most basic way possible. Usually when you isolate things, the culprit becomes much clearer. Start small, slowly build up until it breaks. 

 

By the way, you should run your code after the "load" event (assuming you're not loading in anything dynamically after that), NOT the DOMContentLoaded event. You might have images that are still loading in and then when they finish loading, maybe they shift the whole layout. ScrollTrigger automatically does a .refresh() on "load" anyway, though, so you probably don't need to do anything special there. i'm concerned that maybe you're loading things in AFTER that event fires, though. 

 

Once we see a minimal demo, I bet it'll be more clear. 

[MarwanAK10]

Thank you for your replies and patience. 

I am unable to reproduce the issue exactly with codepen, however there is an odd behavior on codepen when I set the start value to "top center" the trigger object jumps to the center of the div rather than being aminated when its top reaches the center, unless I am misunderstanding... Here's the code pen: 

See the Pen JjpQvRJ by MarwanAK10 (@MarwanAK10) on CodePen

otherwise, the code seems to work on codepen, for example when start is set to "top top". 

 

I think I ruled out the idea that the issue may be the computed height of the element the glow slides on, as I tried another endTrigger element and I'm getting similar results, although feels a bit more stable with the new code, which is as follows: 

<script>
gsap.registerPlugin(ScrollTrigger);

function init() {
 ScrollTrigger.create({
    trigger: ".toTranslateY",
    pin: ".toTranslateY",
    start: "top center",
   endTrigger: ".glow-end",
   end: "bottom 80%"
   //end: () => `+=${window.getComputedStyle(document.querySelector('.timeline')).height}`
  });
    
  
}//init

window.addEventListener('load', function(){
     setTimeout( init, 2000);
 // init();
})
</script>

I am not loading any dynamic content, all the page's content is already pre coded and should load upon page load. 

Link to the page (still a work in progress): https://www.ledrabrands.com/alphabetlighting/rgbw/

Any tips are appreciated. Thank you 😃

[GreenSock]

1 hour ago, MarwanAK10 said:

there is an odd behavior on codepen when I set the start value to "top center" the trigger object jumps to the center of the div rather than being aminated when its top reaches the center

Do you mean when the page loads? If so, that's expected because you have it naturally at the very top when the page loads and then when the JavaScript executes ScrollTrigger is like "oh, that element must start in the center!" and it puts it there. It's not supposed to animate it there because on page load, things should start where they're supposed to start (it'd look rather weird if everything gradually moved to where it's supposed to be). 

 

1 hour ago, MarwanAK10 said:

Any tips are appreciated.

I'm a bit confused - did you still have a GSAP-specific question that hasn't been answered?