gsap.utils.selector() not working properly

[Raybi]

Hello, I'm new to GSAP. I was trying scrolltrigger in a NextJS project but I noticed that 

gsap.utils.selector(someRef)

...
  useEffect(() => {

    gsap.to(someRef('.s1'), {
      duration: 1,
      x: 800,
      scrollTrigger: someRef('.s2'),
    });
  });
...

not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help.

gsap.utils.selector(someRef)

...
  useEffect(() => {

    gsap.to('.s1', {
      duration: 1,
      x: 800,
      scrollTrigger: '.s2',
    });
  });
...

Here is the original code that I was working on

import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import React, { useEffect, useRef } from 'react';
gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  const containerRef = useRef();
  const container = gsap.utils.selector(containerRef);
  const test = useRef();

  useEffect(() => {

    gsap.to(container('.s1'), {
      duration: 1,
      x: 800,
      scrollTrigger: container('.s2'),
    });
  });

  return (
    <>
      <div ref={containerRef} className='container-wrapper'>
        <div className='hero section'></div>
        <div className='about section'>
          <div className='s1'></div>
          <div className='s2'></div>
        </div>
        <div className='skills section'></div>
      </div>

      <style jsx>{`
        .section {
          height: 100vh;
          width: 100%;
        }

        .hero {
          background-color: red;
        }

        .about {
          background-color: green;
        }

        .skills {
          background-color: blue;
        }

        .s1 {
          width: 200px;
          height: 200px;
          background-color: white;
        }

        .s2 {
          margin-top: 400px;
          width: 200px;
          height: 200px;
          background-color: black;
        }
      `}</style>
    </>
  );
}

 

[Cassie]

Hey there! Welcome to the forums

 

I'm not quite visualising what you're trying to explain. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

As you're using React you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[SteveS]

When you are going to add a ref to a dom element, always instantiate it as null.

If you are in react 18, disable strict mode, as it causes double rerenders.

Add an empty dependency array to your effect hook to make sure it only runs once.

Put your tweens in a useLayoutEffect if they aren't working as expected, especially when using ScrollTrigger.
 
Instead of using the element as a simple trigger through scrollTrigger: ".selector" provide a config object and put on markers:

scrollTrigger: {
	trigger: ref.current, //or whatever selector you are using
    markers: true
}

So that you can see how the triggers are actually interacting with your setup.