Laurie Posted March 2, 2020 Share Posted March 2, 2020 Hey ! I'm experimenting GSAP3 with React Hooks - that I learn everyday. And as a beginner, I just want to know if my code is ok or not. The animation is very easy, but I'm worried about the useEffect and useRef utilisation with GSAP and even if the animation's working, I'm interested to write the best code I could. Here's the example I made. If someone had a few minutes to take a look, it would be very kind! Thanks a lot, and have a great day! Laurie Link to comment Share on other sites More sharing options...
OSUblake Posted March 2, 2020 Share Posted March 2, 2020 You don't need to import eases, like Power4. Just use the string syntax. // in ease: "power4.in" // out ease: "power4.out" // inOut ease: "power4.inOut" This is better. import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; import "./styles.css"; function App() { let containerRef = useRef(null); useEffect(() => { gsap.to(containerRef.current, { color: "red", scale: 1.2, delay: 1 }); }, []); return ( <div className="container" ref={containerRef}> <h1>Hello World!</h1> </div> ); } And hooks can get messy with animations. Don't be afraid to use classes. 3 Link to comment Share on other sites More sharing options...
Laurie Posted March 2, 2020 Author Share Posted March 2, 2020 Thanks OSUblake ! Actually, I didn't know for the easings. Great news ! I'm trying to only use hooks, with GSAP. But I don't know how to correctly target elements. I read that we have to use refs but I don't know if this is a correct method for GSAP. What do you think about that ? Thanks again! Laurie Link to comment Share on other sites More sharing options...
OSUblake Posted March 2, 2020 Share Posted March 2, 2020 2 minutes ago, Laurie said: I read that we have to use refs but I don't know if this is a correct method for GSAP. Sure. Refs is like a special variable for react. It can hold anything. In this case, it will hold an element. <div className="container" ref={containerRef}> <h1>Hello World!</h1> </div> But, it's best to access refs by using .current. useEffect(() => { gsap.to(containerRef.current, { color: "red", scale: 1.2, delay: 1 }); }, []); 4 Link to comment Share on other sites More sharing options...
Laurie Posted March 3, 2020 Author Share Posted March 3, 2020 Sorry for the delay. Thanks a lot for the answer. One last thing : I'm wondering if I'm right if I write simply the simply syntax for gsap : gsap.to(".myContainer", { color: "red", scale: 1.2, delay: 1 }); Do you know if it's a good method to write the class name with React, or should I use only Refs ? Thanks again, Laurie Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2020 Share Posted March 3, 2020 53 minutes ago, Laurie said: Do you know if it's a good method to write the class name with React, or should I use only Refs ? Just use refs. Using class names and IDs can cause problems with components. 2 Link to comment Share on other sites More sharing options...
cdedreuille Posted June 9, 2020 Share Posted June 9, 2020 Might not be a GSAP question but what would be the best way then to apply the same effect to multiple refs in react. Is the only way to duplicate both the refs and the animation? Link to comment Share on other sites More sharing options...
OSUblake Posted June 9, 2020 Share Posted June 9, 2020 Hard to say withtout seeing what you're doing. If you need to apply the same animation to a ref, then you should probably make a function to do that. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now