Can't remove timeline within timeline

[Sygol]

Hi guys,

I am pretty new to GSAP and I am working on setting up basic animation for some HTML elements on the page.

First I am creating timeline for every HTML element that I want to perform animation on (all of them have "animate" class), like this:

function animateComponent(component, animationOptions){
    if (component != undefined){
        component.timeline = gsap.timeline();
        component.timeline.from(component, animationOptions);
    }
}

var content1 = $('.content1 .container')[0];
var content2 = $('.content2 .container')[0];
animateComponent(content1, {duration: 1, opacity: .3, y: 15});
animateComponent(content2, {duration: 1, opacity: .3, y: 25});

Then I'm creating master timeline and I am using Intersection Observer to observe those elements, whenever element is in viewport I add element timeline to master timeline, and remove it when element is not in the viewport, like this:

$(document).ready(function(){
    var components = $('.animate');
    var masterTL = gsap.timeline();

    let options ={
        root: null,
        rootMargin: "0px",
        threshold: 0.4
    }

    var observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
          if (entry.target.timeline != undefined){
              if (entry.isIntersecting){
                  masterTL.add(entry.target.timeline);
              }
              else{
                  masterTL.remove(entry.target.timeline);
              }
          }
      });
    }, options);

    components.each(function (index, el){
        observer.observe(el);
    });
})

And it almost works - every element animates one by one, but seems like there is a problem with removing timeline when element gets out of the viewport, so when I scroll to bottom of the page I need to wait for all previous elements to animate before getting animation on current elements. 

I would like to stop animating any element that is not in the viewport.

Or there is another, better way of doing what I plan to accomplish?

 

Hope I explained it well enough.

Thanks for help!

[ZachSaucier]

Hey Sygol and welcome to the GreenSock forums!

 

In this case you really shouldn't be using a master timeline. You should just play the timelines when the relevant element enters the viewport.

 

7 minutes ago, Sygol said:

Or there is another, better way of doing what I plan to accomplish?

We think that ScrollTrigger is pretty cool and a bit easier to use and gives you much more control than the intersection observer API does  

[Sygol]

Hi ZachSaucier and thanks for quick reply

 

Yes, before trying to use master timeline I simply added {paused: true} to timeline in my animateComponent() function and then

if (entry.isIntersecting){               
  entry.target.timeline.play()
}
else{
  if (entry.boundingClientRect.top > 0){
     entry.target.timeline.reverse();
  }
}

And it works pretty well. But when few elements are in viewport at the same time, all animations execute at the same time, and I hoped to fire them one by one. Is it possible to accomplish it without master timeline?

When it comes to ScrollTrigger, I will have a look at it for sure!

 

Btw - when multiple animations fire at the same time for multiple different elements isn't it causing some performance issues?

[ZachSaucier]

Just now, Sygol said:

I hoped to fire them one by one. Is it possible to accomplish it without master timeline?

Yes, it is quite possible. See this thread for more info:

 

1 minute ago, Sygol said:

when multiple animations fire at the same time for multiple different elements isn't it causing some performance issues?

It depends on what and how you're animating as well as the device and browser that people are using. It's impossible to give a generic answer. In some circumstances you can literally animate hundreds of thousands of things at the same time. In other cases even animating just one is not performant