Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Laurie

Am I doing well ? | React Hook + GSAP

Recommended Posts

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

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. 

 

 

 

  • Like 3
Link to comment
Share on other sites

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

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

 

  • Like 4
Link to comment
Share on other sites

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

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.

  • Like 2
Link to comment
Share on other sites

  • 3 months later...

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

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.

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×