Animation duration is wrong only in some cases

[Aitor]

Sorry for not providing a codepen. I think it is not possible in this case. I would like to ask if can be think of a way to detect the problem by looking at the page, which is this:

 

https://nmiai.e451.net/

 

The problem is the following. I have several elements with the class "fade". I watch them with an intersection observer that fires a gsap.to() function when they enter the viewport and another gsap.set() function when they exit the viewport.

 

const fades = document.querySelectorAll('.fade');

if (fades) {
  fades.forEach(function (fade) {
    fadeOut(fade);
  });
}

// omitting intersection observer for simplicity

function loadFades(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      fadeIn(entry.target);
    } else {
      fadeOut(entry.target);
    }
  });
}

function fadeIn(fade) {
  gsap.to(fade, {
    y: '0',
    opacity: '1',
    duration: '2',
    overwrite: true,
    ease: 'power4.out',
  });
}

function fadeOut(fade) {
  gsap.set(fade, {
    y: '50px',
    opacity: '0',
    overwrite: true,
  });
}

 

This is the entire code in context:

https://github.com/aitormendez/nmiai-website/blob/main/site/web/app/themes/sage/resources/scripts/animateProject.js

 

This works in all cases except for the work page. On this page the duration of the gsap.to() is multiplied. I haven't been able to figure out why.

 

In this video you can see a comparison of how it works on the front page and on the work page. The first case has a correct duration, the second case does not. Why? Any idea will be welcome.

 

 

[mvaneijgen]

Taking a step back. Why not use ScrollTrigger for this? https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Because it sounds like you're trying to build your own ScrollTrigger plugin and are now running in to the bugs that ScrollTigger has already solved. Also when using ScrollTrigger you're getting the niceties of having markers and callbacks to easily debug everything. 

 

From the docs:

Quote

How does ScrollTrigger work? Is it just like IntersectionObserver?

ScrollTrigger does NOT constantly watch every element and check its positioning in the viewport on each tick. We're obsessed with performance and that'd be far too costly. Instead, ScrollTrigger does the processing up-front to figure out where the start/end points are in the natural document flow. In other words, "this ScrollTrigger will be active when the scrollbar is between ___ and ____". Then, it debounces the "scroll" events and only updates things on the next requestAnimationFrame, perfectly synced with GSAP and screen refreshes. It ONLY watches the scroll position. Period. That means it's FAST.

 

[Aitor]

Good point. I hadn't thought of doing it with ScrollTrigger.

[Aitor]

6 hours ago, mvaneijgen said:

Taking a step back. Why not use ScrollTrigger for this? https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

I have done the change to ScrollTrigger! Super easy compared to the intersection observer approach. Thank you very much for the suggestion.

[Cassie]

love to hear it! 💚