SplitText and ScrollTrigger animation not triggering until the element is offscreen

[alpidweb]

Hello, I’m using these animations on a Webflow site:

 

// ANIMATION 1 : Mots ([animate-words])
document.querySelectorAll('[animate-words]').forEach((element) => {
  let split = new SplitText(element, { type: 'words' }); // Sépare en mots
  let delay = element.getAttribute('data-delay') || 0;

  gsap.from(split.words, {
    y: '110%',
    opacity: 0,
    rotationZ: '10',
    duration: 0.5,
    ease: 'power1.out',
    stagger: 0.1,
    delay: parseFloat(delay),
    scrollTrigger: {
      trigger: element,
      start: 'top 90%',
      end: 'bottom bottom',
      once: true
    }
  });
});

// ANIMATION 2 : Caractères ([animate-chars])
document.querySelectorAll('[animate-chars]').forEach((element) => {
  let split = new SplitText(element, { type: 'chars' }); // Sépare en caractères
  let delay = element.getAttribute('data-delay') || 0;

  gsap.from(split.chars, {
    x: '-100%',
    opacity: 0,
    rotationZ: '-15',
    duration: 0.5,
    ease: 'power2.out',
    stagger: 0.05,
    delay: parseFloat(delay),
    scrollTrigger: {
      trigger: element,
      start: 'top 90%',
      end: 'bottom bottom',
      once: true
    }
  });
});

// ANIMATION 3 : Lignes ([animate-lines])
document.querySelectorAll('[animate-lines]').forEach((element) => {
  let split = new SplitText(element, { type: 'lines' }); // Sépare en lignes
  let delay = element.getAttribute('data-delay') || 0;

  gsap.from(split.lines, {
    y: '100%',
    opacity: 0,
    duration: 0.5,
    ease: 'power2.out',
    stagger: 0.2,
    delay: parseFloat(delay),
    scrollTrigger: {
      trigger: element,
      start: 'top 90%',
      end: 'bottom bottom',
      once: true
    }
  });
});

 

I then use the attributes on my text to animate them.

 

On one specific page in development, I noticed that these animations sometimes fail to trigger.

 

Here’s the page: https://agci-preprod.webflow.io/categories/branding-design

 

Each heading has an animation.

 

It’s not always consistent, but sometimes the text animation doesn’t start (I also noticed that when this happens, the ScrollTrigger markers are missing too). When this issue occurs, the text animation only starts once the text element reaches the top of the screen.

 

Do you have any idea how I can fix this to ensure the text animations trigger reliably when they enter the viewport?

 

 

[Rodrigo]

Hi,

 

There is not a lot we can do without a minimal demo that clearly illustrates the problem you're having. A live site is not something we can really help with since we can tinker with it and see what could be causing the error and test possible solutions.

 

There are two things I can think at the top of my head based on the description you've provided and both have to do with layout shifting:

1. The images are loaded after the ScrollTrigger instances are created and since they have a fluid height, their height when ScrollTrigger instances are created most likely is 0, so then the images load, their height is updated so that throws off all the calculations ScrollTrigger made. You can check that the images are loaded either using the load event on the global window object:
   https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
   Or you can check for all the images to be loaded using a custom script or a library for that:
   https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/load
   https://imagesloaded.desandro.com/
2. You are using custom fonts and the fonts are not ready and rendered when the ScrollTrigger instances are created. Again this will create a layout shift since, after the fonts are ready and rendered, the text will use a different height than it did before the fonts were ready and this also throws off all the calculations made by ScrollTrigger. You can check when the fonts are ready in order to create your ScrollTrigger instances after that:
   https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts#doing_operation_after_fonts_are_loaded

Hopefully this helps. If you keep having issues please create a minimal demo.

Happy Tweening!

[alpidweb]

Thank you so much for your help! The issue is now resolved.

 

Adding

document.fonts.ready.then(() => { imagesLoaded(document.body, () => {

before my animations, along with including the imagesLoaded , has fixed the problem.

 

The animations now trigger reliably when they enter the viewport.

 

I really appreciate your guidance!

 

Happy tweening!