React Animation With GSAP

Question

I Created a Simple TodoList using react and tried to integrate GSAP into the project. Here I made use of the state to create controlled animation.

The Problem is

When I add a Todo to the List the Todo is getting added but the opacity of the element is set to 0.

Help me when am I going wrong.

Project Link

Todo.js component

import React, { useRef, useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import { ToggleTodo } from "../actions";
import  {TimelineMax}  from "gsap/all";

const Todo = ({ todoInfo }) => {
  const dispatch = useDispatch();
  let todoRef = useRef(null);
  let [playState, setPlayState] = useState(true);
  const tl = new TimelineMax({ paused: true });

  useEffect(() => {
    tl.fromTo(
      todoRef,
      1,
      { opacity: 0 },
      { opacity: 1, y: "10px", onComplete: () => setPlayState(false) }
    );
    if (playState) tl.play();
  });
  return (
    <div
      className={`alert mb-2 text-white todoItem ${
        todoInfo.isCompleted ? "bg-success" : "bg-info"
        }`}
      onClick={() => dispatch(ToggleTodo(todoInfo.id))}
      ref={element => {
        todoRef = element;
      }}
    >
      {todoInfo.todoText}
      {todoInfo.isCompleted}
    </div>
  );
};

export default Todo;

score 0 · Answer 1 · answered Jun 27 '19 at 16:35

Render the element only once using the useEffect() hook. All we need to do is pass empty array as a second argument to the useEffect() hook.

 useEffect(() => {
    tl.fromTo(
      todoRef,
      1,
      { opacity: 0 },
      { opacity: 1, y: "10px", onComplete: setPlayState(false) }
    );
    if (playState) tl.play();
  }, []);

Refecence Link for the usage of setState inside the useEffect Hook

React Animation With GSAP

1 Answers1