Aquasar

Thanks for the reply @ZachSaucier . For me the issue is not using Vanilla JS instead of JQuery. It is more related to the fact of using React and the GSAP library together. For example, as someone just starting out, the syntax is quite a bit different and takes quite a lot of digging around just to get up and running. Some of the things I had to search for a while - gsap vs TweenMax vs TimeLineMax. I realize when using npm to install gsap, as most React users would I believe, the syntax is for example gsap.timeline - Where to put the animation logic for gsap, for instance inside a useEffect hook - Using useRef to grab dom elements for the animations. Again a lot of these are probably trivial for you, but for a noob it could be non trivial, especially when trying to learn a new library

I am trying to create this simple example here using React Hooks. I am trying to follow along as close as possible but I am having issues animating the number. I have the following code snippets to define my animation const stats = { stat: 0 }; const t1 = new gsap.timeline({}); useEffect(() => { t1.to(stats, 3, { stat: '+=12', roundProps: 'stat', onUpdate: updateHandler, }); return t1; }, []); And I am returning the following return ( <Container> <Stat onClick={updateHandler}> <span className="span1">{stats.stat}K</span> </Stat> <Blurb> <p>Data Servers</p> </Blurb> </Container> ); I am expecting my number to go from 0 to 12 when I load the page or click on the component, but it is not doing anything. Not sure what I am missing. Here is my full code import React, { useEffect } from 'react'; import { gsap } from 'gsap'; import styled from '@emotion/styled'; const Container = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; `; const Stat = styled.div` & span { font-size: 5rem; } `; const Blurb = styled.div` & p { text-align: center; opacity: 0.8; } `; export const OurStats1 = () => { const updateHandler = () => { console.log('I was updated'); }; const stats = { stat: 0 }; const t1 = new gsap.timeline({}); useEffect(() => { t1.to(stats, 3, { stat: '+=12', roundProps: 'stat', onUpdate: updateHandler, }); return t1; }, []); return ( <Container> <Stat onClick={updateHandler}> <span className="span1">{stats.stat}K</span> </Stat> <Blurb> <p>Data Servers</p> </Blurb> </Container> ); }; export const OurStats2 = () => { return ( <Container> <Stat> <span>99.97%</span> </Stat> <Blurb> <p>Service Uptime</p> </Blurb> </Container> ); }; export const OurStats3 = () => { return ( <Container> <Stat> <span>30</span> </Stat> <Blurb> <p>Fortune 500 Companies</p> </Blurb> </Container> ); }; export const OurStats4 = () => { return ( <Container> <Stat> <span>10M</span> </Stat> <Blurb> <p>Automation Workflows</p> </Blurb> </Container> ); };

This is really good Rodrigo, I been looking for an example like this! I have a question regarding the fact that you are still using useEffect to put the gsap animation in. Can you help me understand why? That could be the issues with my I am having problems. I got rid of the useEffect since I thought that might not be need as I am not requiring the animation effect to run on load. As a gsap newbie, do you know the difference between using gsap and TweenMax ? I see lots of tutorials using TweenMax and TimeLineMax and my thought it that the following imports both max versions? import { gsap } from 'gsap';

I have the following code and am trying to create a menu icon that closes and open. I am having issues getting the animation to run in reverse using React. Here is my code snapshot, const [reverse, setReverse] = useState(true); function moveBurger() { const tl = new gsap.timeline({ paused: true, reversed: reverse }); tl.to('.burger_rect1', 0.2, { rotation: 45, transformOrigin: '50% 50%', }) .to('.burger_rect2', 0.2, { scaleX: 0 }) .to('.burger_rect3', 0.2, { rotation: -45, transformOrigin: '50% 50%', }); if (reverse === true) { console.log('play it'); tl.play(); } else { console.log('reverse play it'); tl.reverse(); } setReverse(prev => !prev); } I did a console.log and looks like it runs the animation fwd and it does not run the animation backward, but it logs 'reverse play it' Any suggestions ? Full component here import React, { useState } from 'react'; import styled from '@emotion/styled'; import { gsap } from 'gsap'; const SVG = styled.svg` & rect { fill: #fff; } &:hover { & .line-one { stroke: red; } } `; const BurgerSVG2 = () => { // main mobile function, gets called on hover const [reverse, setReverse] = useState(true); function moveBurger() { const tl = new gsap.timeline({ paused: true, reversed: reverse }); tl.to('.burger_rect1', 0.2, { rotation: 45, transformOrigin: '50% 50%', }) .to('.burger_rect2', 0.2, { scaleX: 0 }) .to('.burger_rect3', 0.2, { rotation: -45, transformOrigin: '50% 50%', }); if (reverse === true) { tl.play(); } else { tl.reverse(); } setReverse(prev => !prev); } return ( <SVG onClick={moveBurger} className="burgerSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" width="40" height="40" > <rect className="burger_rect burger_rect1" width="100" height="10"></rect> <rect className="burger_rect burger_rect2" y="30" width="100" height="10" ></rect> <rect className="burger_rect burger_rect3" y="60" width="100" height="10" ></rect> </SVG> ); }; export default BurgerSVG2;

Cool examples. Would be awesome to see some updated examples with React or Vue rather than Jquery! ?