next js scrolltrigger issues with containeranimation and matchmedia in a horizontal layout

[Obaida Zeino]

i have a wide container in my react next app which i am animating horizontally on scroll using gsap. this container has many elements and divs of elements which i want to animate when they enter and reverse when they leave the viewport. keep in mind they are inside of the container that is being animated horizontally on scroll. this setup is only for desktop therefore i am also using match media. 

 

unfortunately this demo on stackblitz is not exactly where my code is at, my code animates the tweens but only on initial render and pays no attention to scroll triggers or toggle actions.

https://stackblitz.com/edit/stackblitz-starters-hz2ve1?file=app%2Fpage.tsx

kindly let me know why this is so and how to fix it. I am no expert in gsap but have read the documentation and this is where i am so far.

 

here is the usegsap code:
 

useGSAP(() => {

let mm = gsap.matchMedia();

 

const width = containerRef.current.offsetWidth; // Get the offsetWidth of the container

gsap.registerPlugin(SplitText);

 

gsap.registerPlugin(ScrollTrigger);

 

mm.add(

{

// set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match.

isDesktop: `(min-width: 769px)`,

isMobile: `(max-width: 768px)`,

},

(context) => {

// context.conditions has a boolean property for each condition defined above indicating if it's matched or not.

let { isDesktop, isMobile } = context.conditions;

let containerAnimation = gsap.to(`.${styles.container}`, {

x: -8500, // change padding on main in css accordingly

ease: "none",

scrollTrigger: {

trigger: `.${styles.container}`,

pin: true,

scrub: 1,

end: `+=${width}`,

}

});

const titleSplit = new SplitText(titleRef.current, { type: "words,chars" });

console.log(titleSplit)

gsap.fromTo(titleSplit.chars,{

y: -100,

stagger: 0.05,

duration: 1,

scrollTrigger: {

trigger: titleRef.current,

start: isDesktop ? "left 80%" : "top 80%",

end: isDesktop ? "right 20%" : "bottom 20%",

toggleActions: "play reverse play reverse",

horizontal: isDesktop ? true : false,

containerAnimation: isDesktop ? containerAnimation : "",

markers: true,

},

 

}, {

y:0

})

 

gsap.fromTo(`.${styles.black}`,{

scaleX: 0,

duration: 1,

transformOrigin: "0 0",

scrollTrigger: {

trigger: `.${styles.black}`,

start: isDesktop ? "left 80%" : "top 80%",

end: isDesktop ? "right 20%" : "bottom 20%",

toggleActions: "play reverse play reverse",

horizontal: isDesktop ? true : false,

containerAnimation: isDesktop ? containerAnimation : "",

markers: true,

},

},{

scaleX:1,

})

 

return () => {

// optionally return a cleanup function that will be called when none of the conditions match anymore (after having matched)

// it'll automatically call context.revert() - do NOT do that here . Only put custom cleanup code here.

};

}

 

);

See the Pen page.tsx by edit (@edit) on CodePen

[Rodrigo]

Hi @Obaida Zeino and welcome to the GSAP Forums!

 

Unfortunately your demo is not working because these seem to be undefined:

gsap.to(`.${styles.container}`, {});

gsap.fromTo(`.${styles.second}`, {});


scrollTrigger: {
  trigger: `.${styles.black}`,
}

I understand the benefits of scoping your CSS, but unfortunately the weird way of doing this that React enforces doesn't seem to help. Other frameworks like Vue, Svelte and Angular (to name just 3) allow you to scope your styles without this CSS modules stuff, which could be the problem here.

 

You could add just regular classes after the scoped ones by the module using plain text, with the sole purpose of using those classes for selecting the elements. Also keep in mind that with useGSAP you can scope your selectors:

https://gsap.com/resources/React

 

Once we see a working demo, we'll be able to further help you.

Finally thatnks for being a GSAP Club member and supporting GSAP! 💚

 

Happy Tweening!

[Obaida Zeino]

@Rodrigo

 

I have modified the code based on your feedback and got it to the point where my local code is at where it animates on initial render but does not consider the toggle actions and scroll trigger. also, the split text doesn't seem to work?

kindly check it out and let me know your suggestions.

[Rodrigo]

Hi,

 

Just move the configs for duration, ease, scrolltrigger and stagger to the to config section:

gsap.fromTo(
  titleSplit.chars,
  {
    y: -100,
  },
  {
    y: 0,
    stagger: 0.1,
    duration: 1,
    scrollTrigger: {
      trigger: titleSplit.chars,
      start: isDesktop ? 'left 80%' : 'top 80%',
      end: isDesktop ? 'right 20%' : 'bottom 20%',
      toggleActions: 'play reverse play reverse',
      containerAnimation: isDesktop ? containerAnimation : '',
      markers: true,
    },
  }
);

Here is a fork of your demo with those changes:

https://stackblitz.com/edit/stackblitz-starters-rdigb3?file=app%2Fpage.js

 

Hopefully this helps.

Happy Tweening!

[Obaida Zeino]

wow that was too easy. been stuck on this for a while. thank you sir.