Stagger gets ignored when fired by Intersection Observer

[Mike Hart]

Hi there, hope you can help.

 

Im using GSAP3 latest version.

 

For some reason the stagger property gets ignored when used in the js interesection observer api.  Works fine on its own.

 

// on its own, stagger works fine

 gsap.fromTo(".card", { x: '100%' } , { stagger: 0.5, x: 0,  duration: 2, ease: "power2.out" });

 

// not when called with js observer

              const options = {
                rootMargin: "0px",
                threshold: 0
              };

              const moveup = new IntersectionObserver(entries => {

                entries.forEach(entry => {

                  
                  if (entry.intersectionRatio > 0)  {
                      console.log(entry.ta);
                   

                    // the fromTo gets fired but not the stagger

                    gsap.fromTo(entry.target, { x: '100%' } , { stagger: 0.5, x: 0,  duration: 2, ease: "power2.out" });
                    moveup.unobserve(entry.target);
                  }

                });
              }, options);
       
              const targetElements = document.querySelectorAll(".card");

              for (let element of targetElements) {
                  moveup.observe(element);
              }

 

 

thanks in advance.

 

 

[mikel]

Hey @Mike Hart,

 

Welcome to the GreenSock Forum.

 

Normally, each ScrollTrigger will fire its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? That could get awkward to do manually. Same with IntersectionObserver

 

So check out ScrollTrigger.batch().

 

Happy scrolling ...

Mikel

 

 

[Mike Hart]

Thanks mikel

 

This looks like the way forward.

 

How can I import ScollTrigger.  Im using webpack with npm and cant see any references in repo?

 

[mikel]

Hey @Mike Hart,

 

There are many ways to get GSAP.

A good way: read the docs for installation.

 

Happy tweening ...

Mikel

 

 

[ZachSaucier]

As the demo from the batch video shows, you can do this using intersection observers. But it's easier using ScrollTrigger's .batch method