ScrollTrigger recalculations issue / animation glitch (Webflow)

[glOo]

Hello,

I'm encountering an issue with my GSAP/ScrollTrigger animation on Webflow. The glitch seems to be related to DOM changes, likely due to external resources loading after ScrollTrigger has already initialized. I assume ST then wrongly calculates the triggers (start and end) causing the glitch. I've tried using scrollRefresh() and wrapping the entire script in an eventListener for DOMContentLoaded, but the issue persists.

 

1. Video with the issue:
https://youtu.be/_M-Q6dcT9S0
 

- Funnily the animation works correctly the first time, but on subsequent attempts, a glitch appears.
 

2. Triggers shift video:

https://youtube.com/shorts/fCR3IKiSsQI

- With markers turned on, I can see the trigger points shifting while the site is still loading probably causing the glitch

•  

3. Temporary Workaround:

• As a temporary fix, I set the section meant to be animated to display: hidden until the DOM is fully loaded and then script changes it to the "block". This resolves the glitch, but I believe there should be a better solution how to handles this without a need to hide the entire section.

Live URL: Link to one of the talent pages (The issue can be replicated on other talent pages as well).
 

Current Code Snippet: 
 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  // Wait for the entire window, including images, to be fully loaded
  window.onload = function () {

    // Temporary workaround: Make the projectpage-image visible by setting display to block
    //document.querySelectorAll('.projecttalent').forEach(function(element) {
      //element.style.display = 'block';
    //});

    // Create your ScrollTriggers and animations here
    gsap.from(".projectpage-image", {
      scale: 0,
      duration: 3,
      ease: "power2",
      scrollTrigger: {
        trigger: ".talent-work",
        scrub: 2,
        start: "bottom +=400",
        invalidateOnRefresh: true,
        onEnter: () => {
          // Attach the scroll event listener when the ScrollTrigger enters the viewport
          window.addEventListener('scroll', redirectHome);
        },
        // markers: true,
      },
    });

    // Call ScrollTrigger.refresh() at the end
    ScrollTrigger.refresh();
  };

  let redirectTimeout;

  const redirectHome = () => {
    if (window.scrollY + window.innerHeight >= document.body.offsetHeight) {
      clearTimeout(redirectTimeout);
      redirectTimeout = setTimeout(() => {
        window.location.href = '/'; 
      }, 800); 
    }
  }
</script>

 

Webflow Build URL (FF-TALENTs TEMPLATE within CMS collections, code shown above inserted within this page)
 

I would greatly appreciate any advice or solutions, as this is my first experience working with GSAP.

Thank you in advance!

[Rodrigo]

Hi,

 

Unfortunately there is not a lot we can do without a minimal that clearly demonstrates the problem, since we can't debug or tweak the code of a live production site.

 

If your elements have a fluid height is a bit complicated, you'll have to find a way to track when either each element is loaded and rendered in order to call ScrollTrigger.refresh() when each one loads or when all of them are loaded (better to do it when all the elements are loaded).

 

Also this is quite odd as well:

window.onload = function () {
  gsap.from(".projectpage-image", {
    scale: 0,
    duration: 3,
    ease: "power2",
    scrollTrigger: {
      trigger: ".talent-work",
      scrub: 2,
      start: "bottom +=400",
      invalidateOnRefresh: true,
      onEnter: () => {
        // THIS LINE
        window.addEventListener('scroll', redirectHome);
      },
    },
  });
  ScrollTrigger.refresh();
};

let redirectTimeout;

const redirectHome = () => {
  if (window.scrollY + window.innerHeight >= document.body.offsetHeight) {
    clearTimeout(redirectTimeout);
    redirectTimeout = setTimeout(() => {
      window.location.href = '/'; 
    }, 800); 
  }
}

Why are you calling a method that redirects the user when it gets to a specific position by attaching an event listener to the next scroll event? Are you removing that event listener somewhere in your code? Why not use ScrollTrigger to just trigger that on the onEnter callback? Does the problem you're seeing happens without that redirect call?

 

You could setup an element at the bottom of the page that has a height of 1px and is transparent. Setup a ScrollTrigger that triggers when the element touches the bottom of the viewport and setup a GSAP DelayedCall in order to start that timeout. Use the onEnter callback to start/restart that DelayedCall and the onLeaveBack callback to pause it:

https://gsap.com/docs/v3/GSAP/gsap.delayedCall()

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onEnter

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onLeaveBack

 

Hopefully this helps

Happy Tweening!