pietdasilva

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?

@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!

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!

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]);

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 } : ?? } ); }); }, []);

yes, that's it, thank you!

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

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;

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> ); }

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?

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

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?