Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

JoelC's Achievements



  1. Here's one: https://stackblitz.com/edit/react-ref129342 Thanks!
  2. My timeline is broken up into sections with pauses, and I'm using React state to trigger tweens to various sections. It's set up something like this: tl.addLabel('section1') .move(...) .move(...) .addPause() tl.addLabel('section2') .move(...) .addPause() tl.addLabel('section3') .move(...) .move(...) .addPause() So when I tween to section2, it'll go though the animations and then pause before section3, until the state is ready for it. My question is whether there's a straightforward way to have that pause be a looping animation, until a tween to section3 is triggered: tl.addLabel('section1') .move(...) .move(...) .addPause() tl.addLabel('section2') .move(...) .addPause() // infinite loop while waiting for next tween tl.addLabel('section3') .move(...) .move(...) .addPause() Thanks!
  3. When I try to use a ref like this: const tl = useRef(); tl.current.to(...) // This would be in an effect that runs once on mount I get this error: Uncaught TypeError: Cannot add property _gsap, object is not extensible at new GSCache (gsap-core.js:1502) at _harness (gsap-core.js:122) at new Tween (gsap-core.js:2983) at Object.to (gsap-core.js:3325) at goToAndAnimate (StatusIcon.tsx:62) at StatusIcon.tsx:43 at commitHookEffectList (react-dom.development.js:21997) at commitPassiveHookEffects (react-dom.development.js:22031) at HTMLUnknownElement.callCallback (react-dom.development.js:336) at Object.invokeGuardedCallbackDev (react-dom.development.js:385) The line that seems to be triggering this is: let currentTime = tl.current.time() Things just work when I put it in a state rather than a ref (although then the timeline seems to get really wonky). Any idea why this might be happening?
  4. The tweenTo.duration(0.5) version didn't work, but the second one did. Thanks so much!
  5. Hi ? I'm using one long timeline for various React states, and the plan is to tween quickly to the correct label when my state changes. The problem is I can't figure out how to set a static duration (say, 0.5) for the tween in GSAP 3. Is there a way to do this? Also, I'd like the tween to ignore pauses I've added between each state (w/ tl.addPause()). Is this the expected behavior? Thanks!