Jump to content
Search Community

Am I doing well ? | React Hook + GSAP

Laurie test
Moderator Tag

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

  • 3 months later...

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.
×
×
  • Create New...