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: https://codepen.io/MarwanAK10/pen/JjpQvRJ 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 ?

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.

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!