gsap.utils.selector on react

[pietdasilva 1 Likes (Newbie)]

hi friends, i'm new to gsap and just learned how the .from tween got some issues with react. it's the same thing with the gsap.utils.selector method? cause i can't seem to animate the children on scroll. thanks!  *edit: can't seem to use sandbox either so here's the code

import React, { useEffect, useRef } from "react";

import { gsap } from "gsap";

import "./styles.css";

import { ScrollTrigger } from "gsap/all";

gsap.registerPlugin(ScrollTrigger);

 

export default function App() {

const boxRef = useRef(null);

const q = gsap.utils.selector(boxRef);

 

useEffect(() => {

gsap.to(q, {

rotation: "+=360",

duration: 2.5,

scrollTrigger: { trigger: q },

});

});

 

return (

<div className="app">

<div className="boxes" ref={boxRef}></div>

<div className="box">

<div>1</div>

</div>

<div className="box">

<div>2</div>

</div>

<div className="box">

<div>3</div>

</div>

<div className="box">

<div>4</div>

</div>

</div>

);

}

[SteveS 175 Likes (Specialist)]

You need to use the selector in the effect since refs are not populated until after render. Also, be wary of reacts double render in strict mode.

[Cassie 4,852 Likes (Superhero)]

🥳 NO NEED TO BE WARY ANYMORE 🥳

3.11 is herrre

(jump to the context section)

https://greensock.com/docs/v3/GSAP/gsap.context()

Woop woop!

See the Pen xxWRjyq by GreenSock (@GreenSock) on CodePen

[pietdasilva 1 Likes (Newbie)]

like this? still no luck, localhost is blank

 

import { useState, useEffect, useRef } from "react";

import "./Projects.css";

import { ProjectImg } from "./ProjectImg";

import gsap from "gsap";

import { ScrollTrigger } from "gsap/all";

gsap.registerPlugin(ScrollTrigger);

 

function Projects() {

  const wordsRef = useRef();

 

  useEffect(() => {

    const q = gsap.utils.selector(wordsRef);

    gsap.to(q, {

      y: -50,

      opacity: 1,

      duration: 2.5,

      scrollTrigger: { trigger: q }

    });

  });

 

  return (

    <>

      <section className="projects">

        {ProjectImg.map((elem, i) => (

          <li key={i} useRef={wordsRef}>

            <span className="title">{elem.name}</span>

            <div className="img-cont">

              <img src={elem.img} alt={elem.name} />

            </div>

            <p>{elem.text}</p>

          </li>

        ))}

      </section>

    </>

  );

}

 

export default Projects;

[Cassie 4,852 Likes (Superhero)]

Here's a starter template!

https://codesandbox.io/s/je6ln

[SteveS 175 Likes (Specialist)]

@pietdasilva gsap.utils.selector returns a selector function. You cannot target q directly in your example. If you want to select everything withing the wordsRef element, use q(">  *") or some other css selector.