Search the Community

I have a menu drawer that has a ul with 6li's in it next.js, react, gsap, tailwind. I need to animate them, currently I am creating timelines for each li and creating refs then on mouse enter and mouse leave on the lis I am manipulating the specific timeline (playing and pausing it) using the index. I wanted to know if this is the most optimised way of doing this or not? MenuDrawer.js

So I'm curious if there is any good tutorials out there on how to use React Hooks with GSAP What I'm looking to do is most likely use some useEffect hooks to have an animated transition in and then a transition out. If there are no existing resources on this for me to read up on then I'll look to post my code in here once I'm to that point.

Hi everyone, First time poster. I see that a Codepen is highly recommended, I am just not sure how to create this react app in Codepen. I will have to look into how to do this next. So. I have been trying to find the solution on the forums to no avail. I can get my animation to play once, but it won't reverse, and it won't play again and I am not sure why. This is the first time using GSAP and timelineLite. What I want to happen is the firstname, lastname and whoButton will zoom off the page, displaying a card with some aboutMe text. Then there is an 'OK' button on that card, which I want to then have the card dissapear (that's working) and then the text to zoom back in to its original position. Does someone mind explaining where my lack of understanding is coming in sorry. Cheers. Simon EDIT: THIS CODE BELOW HAS NOW BEEN UPDATED IN THE SANDBOX LINK PROVIDED IN MY REPLY. const tl = useRef(); // this handles my aboutMe text showing up or not (working) const [showText, setShowText] = useState(false) // this handles my profile photo moving (working) const [animation, setAnimation] = useState(null) // this handles my firstname/lastname/whoButton moving (not-working) const [textAnimation, setTextAnimation] = useState(tl.current = new TimelineLite({ paused: true })) // this goes with the code above (not-working) const [toggle, setToggle] = useState(false); // getting the references of the objects I want to move const profImg = useRef(null); const nameTextFirst = useRef(null); const nameTextSecond = useRef(null); const whoButton = useRef(null); useEffect(() => { // this animation is working setAnimation( TweenMax.to(profImg.current, 1, {y: '20%'}).pause() ) // this animation is not setTextAnimation( tl.current .to(nameTextFirst.current, 0.5, {x: '200%'}) .to(nameTextSecond.current, 0.5, {x: '200%', delay: -0.3}) .to(whoButton.current, 0.5, {x: '200%', delay: -0.15}) ) }, []) function hideAboutMeText() { setShowText(false) animation.reverse() //not working below textAnimation.reverse() } function showAboutMe() { animation.play() //not working below textAnimation.play() // working below setTimeout(() => { setShowText(true) }, 1000); } // not working useEffect(() => { tl.current.reversed(!tl.current.reversed()); }, [toggle]); // not working const toggleTimeline = () => { setToggle(!toggle); };

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> ); }

Hi there, I'm new with gsap, and I would love to integrate it with my react projects. For what I understood, to use gsap to animate my elements, I need first to target them with ref and useRef(), I was wondering in case I need to create a grid based on data coming from an api call, let's say a not definied number of tiles with images, and I want them to appear with a staggered animation, how should I proceed ? I am a bit confused because I don't know how to target them with useRef() I hope that my question makes sense, in case I'm happy to clarify Cheers

Hey ! I'm experimenting with React JS, and I'm wondering what is the best method to start an animation when the DOM's ready with React JS. Plus, I don't know what method is the best to target elements in React JS. I need some advices : Should I use useCallback hook, or simply the States and Refs ? Here's an example of what I did. This is very simple and minimalist. https://codesandbox.io/s/prod-river-xqvuu Actually, the animation works, but as I said I would like to know if my method looks good or not. If someone could take a look... Thanks !! Take care Lucie

I've recently found a very nice codepen containing almost the exact same animation I wanted done in GSAP, and I've been trying to convert it to GSAP 3 to use it in a web app using pretty much just react hooks all over. It uses timeScale tweening to simulate acceleration and deceleration of a rotating svg, with a play/pause button. However, I can't seem to get the acceleration/deceleration effect to work on Firefox/Chrome, and it won't pause, either. The codepen I linked is the effect I'm trying to achieve, and I've linked a minimal reproducible example below: https://codesandbox.io/s/blissful-hill-boo2n There is just one condition that I'd like to include for my app besides using hooks and gsap 3, and that is that I need to fade the rotation in and out based on the state of the parent element, and as far as I can see that's working alright (as evidenced by the isActive! isNotActive! console logs). That state is currently set by the playButton element, via the setActiveCallback function. I'm not sure this is what's breaking everything, since the animation itself doesn't look like it's working properly on it's own with either react hooks or gsap 3. TL;DR: I can't get codesandbox the animation to pause, and the intended acceleration/deceleration effect is borked. Any help will be very much appreciated!