Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About Aquasar

  • Rank
  1. Aquasar

    onclick event

    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 in
  2. 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
  3. 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?
  4. 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, { rot
  5. Aquasar

    onclick event

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