JoelC
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by JoelC
-
-
-
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!
-
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?
-
The tweenTo.duration(0.5) version didn't work, but the second one did.
Thanks so much!
-
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!
Creating GSAP Timeline with React Project
in GSAP
Posted
That worked, thank you!