Hi,
I am trying to store a timeline to the useState hook in react, so that I use the state variable to control the timeline. I have been able to get this to work easily with React class Components, via storing a timeline to the state, but it is not working in useState for some reason.
Does anyone know what I am doing wrong here? Thank you for any pointers!
In my code example, onClick events on buttons are doing things that other events might do, just so it keeps it simple.
Desired behavior:
1. Click first button, and it stores an array of classNames to a state hook. The JSX then uses this array to render elements (in this case it is divs).
2. Click the second button, and it calls a function that creates a timeline. It passes the array of classNames to this function, so that they will be used in the green sock timeline.
3. Click the third button and play the timeline.
Actual behavior:
Step three is not working. The timeline logs to the console, showing that it is stored to the state hook, but won't play. If I create the timeline in the actual onClick listener of the button (and pass the classNames stored on state to it), it does work. But this solution is not good because you are not storing the timeline anywhere to control, etc.
This code should work, if you import it with any react app that has greensock installed (and uuid for keynames, but that can be removed for testing). Also, starter pen for green sock and codepen isn't working, so if anyone knows how to easily import the TimelineMax into codepen, copy and pasting this code should work right away.
import React, { useState } from "react";
import { v4 as uuid } from "uuid";
import { CSSPlugin, TimelineMax } from "gsap/all";
const plugins = [CSSPlugin];
const createTimeline = (elements) => {
// add a dot to the class names
let elementClassSelectors = elements.map((className) => `.${className}`);
const tl = new TimelineMax({ paused: true });
tl.to(elementClassSelectors, 2, { x: 100 });
return tl;
};
export function AnimatedComponent() {
let [timeline, setTimeline] = useState(null);
let [elementsToAnimate, setElementsToAnimate] = useState([]);
return (
<div className="component-frame">
<div className="display-animation">
{elementsToAnimate.map((elementClassName, i) => {
// could use useRef here, but instead just adding classNames that can be used in green sock
return (
<div className={`image ${elementClassName}`} key={uuid()}>
I am image {i}
</div>
);
})}
</div>
<div
className="controls"
style={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
margin: "auto",
}}
>
{/*
These functions will actually be triggered by various events. But have
them fired by buttons for now. */}
<button
onClick={(e) => {
e.preventDefault();
let elementClassNames = [
"some-image",
"some-other-image",
"another-image",
];
setElementsToAnimate(elementClassNames);
}}
>
CLICK FIRST: store new elements to state
</button>
<button
onClick={(e) => {
e.preventDefault();
let newTimeline = createTimeline(elementsToAnimate);
setTimeline(newTimeline);
}}
>
CLICK SECOND:create timeline and store it to state (seems to be
working)
</button>
<button
onClick={(e) => {
e.preventDefault();
console.log("see if the timeline is on the state:", timeline);
timeline.play();
}}
>
CLICK THIRD: play the timeline on the state (not working)
</button>
<button
onClick={(e) => {
e.preventDefault();
let temporaryTimeline = createTimeline(elementsToAnimate);
temporaryTimeline.play();
}}
>
CLICK FOURTH: create timeline and don't store it to state (working,
but not good/ need the timeline on the state)
</button>
</div>
</div>
);
}
