Gsap and scroll trigger code working in next but not in react.js

[Zain12]

gsap.registerPlugin(ScrollTrigger);

  useLayoutEffect(() => {

    if(width>960){

      const ctx = gsap.context((self) => {

        const sections = self.selector(".about");

        console.log('this is section length'+sections.length)

 

        const horizontalTween = gsap.to(sections, {

          // xPercent: -70 * (sections.length - 1),

                   xPercent: -99 * (sections.length - 1),

 

          ease: "none",

          scrollTrigger: {

            trigger: wrapperRef.current,

            pin: true,

            markers: false,

            scrub: 1,

            // end: () => "+=" + document.querySelector(".wrapper").offsetWidth ,

            // end: () => "+=" + document.querySelector(".wrapper").offsetWidth ,

           

           

           

 

          },

        });

       console.log( document.querySelector(".wrapper").offsetWidth)

       

 

     

      }, wrapperRef);

      return () => ctx.revert();

 

    }

   

  }, [width]);

 

I have this code which works perfeclty fine in next js but when I implemented same thing in react, it gives following error. Any solution please. regards

Uncaught TypeError: style is undefined
    _getState ScrollTrigger.js:660
    init ScrollTrigger.js:1114
    ScrollTrigger ScrollTrigger.js:857
    create ScrollTrigger.js:2048
    _scrollTrigger gsap-core.js:441
    Tween gsap-core.js:3322
    to gsap-core.js:3609
    ctx SliderSection.js:29
    f gsap-core.js:3927
    add gsap-core.js:3936
    Context gsap-core.js:3902
    context gsap-core.js:4226
    SliderSection SliderSection.js:26
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 20

[GreenSock]

It's very difficult to diagnose without a minimal demo (like a Stackblitz), but based on that error message it sounds like when your code executes, wrapperRef.current is not a valid DOM element. I'd recommend putting a console.log(wrapperRef.current) right before your animation to inspect that. 

 

If you still need help, here's a starter template in React that you can fork to create a minimal demo: 

https://stackblitz.com/edit/react-cxv92j

 

Also, I noticed your running conditional code based on a width - you might want to look into gsap.matchMedia() which is just a fancy gsap.context() that adds extra features for media queries and conditional logic. 

 

Also, I'd use gsap.utils.toArray() instead of using the undocumented self.selector(). 

[Rodrigo]

Hi,

 

Also it seems that the return/cleanup function is inside the conditional block. It should go before the closing curly brace of the effect hook.

 

Happy Tweening!