Second instance of an animation triggering way to early on mobile

[Scott Humphrey]

Hello,

 

I am experiencing an issue with the script below, which is used in the custom code of a Webflow site. The animation works perfectly on desktop and on mobile for the first instance. However, on some pages where I have a second instance of the same element (with identical naming and setup), the second instance triggers too early on mobile. The first instance triggers correctly, but the second is about a screen height above the intended trigger position.

 

I am going live tomorrow, so I can only share limited details and have little time before I need to disable the markers. If anyone has encountered a similar issue or has any explanation, I would greatly appreciate your support.

 

Here is the link to the staging site: Sci Ventures Staging.

 

Thank you!

 

document.addEventListener("DOMContentLoaded", function() {
  // Animate each background container and image within feature cards
  document.querySelectorAll('.feature-reveal-card_bg-container').forEach(container => {
    gsap.fromTo(container, {
      y: "-100px",
      clipPath: "inset(100% 100% 100% 100% round 40px 40px 40px 40px)"
    }, {
      y: "0px",
      clipPath: "inset(0% 0% 0% 0% round 40px 40px 40px 40px)",
      ease: "cubic-bezier(0, 0.56, 0.49, 1)",
      scrollTrigger: {
        trigger: container,
        start: "top bottom",
        end: "top 20%",
        scrub: true,
        markers: true,
      }
    });

    gsap.fromTo(container.querySelector('.feature-reveal-card_bg-image'), {
      scale: 2.0
    }, {
      scale: 1.0,
      ease: "cubic-bezier(0, 0.56, 0.49, 1)",
      scrollTrigger: {
        trigger: container,
        start: "top bottom",
        end: "top 30%",
        scrub: true,
        markers: true,
      }
    });
  });

  // Animate content within each feature card with a staggered timeline
  document.querySelectorAll('.feature-reveal-card_content').forEach(content => {
    gsap.timeline({
        scrollTrigger: {
          trigger: content,
          start: "top 60%",
          end: "top 20%",
          scrub: true,
          toggleActions: "restart pause reverse pause"
        }
      })
      .from(content.querySelectorAll(':scope > *'), {
        duration: 0.75,
        ease: "cubic-bezier(0, 0.56, 0.49, 1)",
        y: '110%',
        opacity: 0,
        stagger: { each: 0.1 }
      });
  });
});

 

[Rodrigo]

Hi @Scott Humphrey and welcome to the GSAP Forums!

 

There is not a lot we can do without a minimal demo. The only things I can see is that you're animating the trigger element on the Y axis:

gsap.fromTo(container, {
  y: "-100px",
  clipPath: "inset(100% 100% 100% 100% round 40px 40px 40px 40px)"
}, {
  y: "0px",
  clipPath: "inset(0% 0% 0% 0% round 40px 40px 40px 40px)",
  ease: "cubic-bezier(0, 0.56, 0.49, 1)",
  scrollTrigger: {
    trigger: container,
    start: "top bottom",
    end: "top 20%",
    scrub: true,
    markers: true,
  }
});

That is definitely not a good idea. Always avoid animating the trigger element especially in the Y axis since that will throw off the calculations made by ScrollTrigger.

 

Finally the DOMContentLoaded event doesn't wait for the images, so maybe the images are being loaded after the ScrollTrigger instances which throws off ScrollTrigger calculations for start/end:

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

You can use the load event:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

Or use a library like Images Loaded:

https://imagesloaded.desandro.com/

 

Hopefully this helps.

Happy Tweening!

[Scott Humphrey]

Thank you for the quick response.  I've changed the trigger to another parent div in Webflow and added the load event as suggested.  Still getting the same issue on mobile, and occasionally on desktop where the second instance of the animation on this page is triggering too early. You can see from the staging link on mobile that the marker is way above the top of the actual trigger start. I've attached a link to a video demo and here is a link to the webflow read only https://preview.webflow.com/preview/sci-ventures-staging-v1?utm_medium=preview_link&utm_source=designer&utm_content=sci-ventures-staging-v1&preview=25556156e33016c551170e397b7b5d9b&pageId=662919d0a1cbc3d36b0075b8&locale=en&workflow=preview 

https://www.loom.com/share/a3523b9cef0c4862bd393d682f63136b?sid=dbd12aa2-b714-4d72-be6a-b48af357b100

Sorry I can't recreate this on code pen, hopefully this is OK. 

[Rodrigo]

Hey Scott,

 

I see the issue but I have zero experience with webflow so I don't really know what to do exactly there, sorry.

 

My advice would be to first remove the animation on the Y axis and see how that works. If you keep having the same issue then try with other CSS styles or maybe wait for the fonts to be loaded (if you're using custom  fonts):

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

 

Maybe try removing some CSS or create just a ScrollTrigger just for the last card and see how that works. If creating only the last ScrollTrigger instance works, then it means that something else is interfering with the instances created after the first one.

 

Another option could be to call the refresh method after both your loops:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

window.addEventListener("load", function() {
  // Animate each background container and image within feature cards
  document.querySelectorAll('.feature-reveal-card_bg-container').forEach(container => {
    ...
  });

  // Animate content within each feature card with a staggered timeline
  document.querySelectorAll('.feature-reveal-card_content').forEach(content => {
    ...
  });
  ScrollTrigger.refresh();
});

 

Sorry I can't be of more assistance

Happy Tweening!