[print dynamic value using TextPlugin on react]

import React, { useEffect, useRef } from "react";
import Language from "./Language";
import { gsap } from "gsap";
import { useTranslation } from "react-i18next";
gsap.registerPlugin(TextPlugin);


function Main() {
const helloRef = useRef();
const { t } = useTranslation();

useEffect(() => {
    const text = helloRef.current;
    const title = <h1>{t("main_title")}</h1>

    gsap.to(text, {
      text: {
        value: title,
        delimiter: "",
      },
      ease: "power1.in",
      duration: 5,
    });
  }, []);

  
  return (
    <>
        <div>
          <h1 ref={helloRef}>{}</h1>
        </div>
    </>
  );
}

 

hi friends, i stored some object linked to a json file on this "./Language.js" and would like to make it work with the value on text plugin (can't pass it as a string since it will change the language i18next). if i printed the {t()} function right on my return it works, but with the useEffect and gsap i can't get to grasp it. some hint?

[animate tween on scroll with react-intersection-observer]

@Rodrigo @GreenSock hi guys, sorry it took so long for me to answer. thank you for both your answers, i'll try to apply both of them on my projects. i love scrolltrigger and never had a problem with it. but the thing is, there are situations where i don't really know how to work with it, like on this css parallax effect, where it affects the scrollbar with a fixed height on a div.

https://youtu.be/mxHoPYFsTuk?t=232

 

another situation would be with a package like locomotive, since it kinda do the same thing affecting the original scroll bar in order to give a smooth scoll (really wish i could afford club greensock and do those things through gsap only 😥)

 

so those situations made me look for react-intersection-observer and avoid scrolltrigger with is a shame

 

if i'm missing something here let me know

 

thanks!

[animate tween on scroll with react-intersection-observer]

https://codesandbox.io/s/question-7xosql?file=/src/App.js

 

hi friends! on the exemple above i was trying to animate a tween on scroll without gsap's scrolltrigger, so i found this api but i'm having trouble to integrate it with gsap, can someone give me a hint? thanks!

[can't seem to capture the ref with .forEach method]

hello! i'm trying to activate some animations when in view with react-intersection-observer. so my ref={ref} on my parent div, but every time it appears in view i just get the invalid scope error. what am i doing wrong here? thanks!

...

import { useInView } from "react-intersection-observer";

import { gsap } from "gsap";

 

function Services() {

 

  const {ref, inView} = useInView({

    threshold: 0.3

  });

 

  useEffect(() => {

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

    q(".compile").forEach((imgframe) => {

      gsap.fromTo(

        imgframe,

        { y: 60, opacity: 0 },

        {

          y: 0,

          opacity: 1,

          duration: 4,

        }, inView

      );

    });

  }, [inView]);

[matchMedia() on react]

hi friends, so i had an animation that was working great on desktop, but when i check it on mobile it doesn't. since it is on a method and it's a scrollTrigger animation i'm having trouble to write it, can someone help me? thanks!

 

function Hero() {

  const imgRef = useRef();

 

 

  useEffect(() => {

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

    let mm = gsap.matchMedia();

 

    mm.add({

      isMobile: "(max-width: 500px)",

      isDesktop: "(min-width: 501px)",

    }, (context) => {

      let {isMobile, isDesktop} = context.conditions;

   

 

    q(".textBtn").forEach((txt) => {

      gsap.to(

        txt,

        {

          scrollTrigger: isDesktop ? { trigger: txt, scrub: 0.8, start: 'top 40%', end: "+=400", pin: true, pinSpacing: false  }  :  ??

        }

      );

    });

  }, []);

 

[scrolltrigger many elements on react]

yes, that's it, thank you!

[scrolltrigger many elements on react]

hi friends, let's say i have different children elements with the same class name that i want to animate on scroll, what am i doing wrong here? thanks!

 

https://codesandbox.io/s/tender-cherry-j8cejs?file=/src/App.js

[gsap.utils.selector on react]

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;

[gsap.utils.selector on react]

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>

);

}

[change background color between react components]

hi Cassie, thanks for answering. here's the thing, i was intending to do this effect between react components, not inside some div element. is there a way?

[change background color between react components]

hi friends, is there a way to gradually change the colors of let's say, the background, like the code above, but not between sections of the same html but between react components, i'm trying to do it through the main app.js with scrolltrigger, but i think im missing something

See the Pen d3c666ab441f15a8ea0da4a57535ea49 by akapowl (@akapowl) on CodePen

[select multiple elements on react]

hello friends, i'm new to gsap and to react also. so my question might be a little too simple. i was trying to recreate these box example on react but the way it selects multiple elements on the example only works for components, let's say i want to tween a group of texts inside a div with a ref, how should i declare it?

 

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