[GSDevTools and React (18)]

alright, thank you

A last thing: I have a TS warning about calling .kill() on my instance

 

 

however, gsDevTools is typed:

 

how to avoid this warning?

[GSDevTools and React (18)]

I'd like to use GSDevTools in a React (18) project with HRM enabled (with Vite).

 

Using the new gsap.context(), I tried `.create()`ing it inside:
 

// src/App.js

function App() {
  useEffect(() => {
    const ctx = gsap.context(() => {
      const gsDevTools = GSDevTools.create(); // HERE
      
      gsap.fromTo(...);
    });
    
    return () => ctx.revert();
  }, [])

  return (<>...</>)
}

but once HRM reloads, I got 2 (or more) GSDevTools one over the other.

 

I've contacted the support and quickly got a quick answer from @Cassie:
 

Quote

So in React 18 effects get called twice to double check that you’re cleaning up properly should your component get rendered again. We made context to make cleanup nice and easy, but context only groups tweens, timelines and scrollTriggers ready too be killed. You’ll need to manually kill your GSDevTools instance with .kill() in that cleanup function.

What I understand from this, is I have to "manually" cleanup (without the help of `ctx.revert()`) my gsDevTools instance. Here is my try:
 

// src/App.js

function App() {
  // GSDevTools instance
  useEffect(() => {
    const gsDevTools = GSDevTools.create();
    return () => gsDevTools.kill();
  }, [])

  // Tweens
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.fromTo(...);

      // other tweens...
    });
    
    return () => ctx.revert();
  }, [])

  return (<>...</>)
}

@Cassie am I correct? Is this the correct way of properly handle GSDevTools ?

 

As you can see, I have instantiated it in its own `useEffect`: is it something recommended?

Ultimately and to be sure, why GSDevTools is not "auto-cleaned" with `gsap.context()`? Is this something that could come in a next release? (or no, this is intentional)

Thank you

[Animating the playhead of <video> element. Is it possible?]

Re-encoding myvid.mp4 into myvid2.mp4 with a key for each frame(larger size, but fastest seek time):

ffmpeg -i myvid.mp4 -c:v libx264 -x264-params keyint=1:min-keyint=1 myvid2.mp4

ref: https://trac.ffmpeg.org/wiki/Encode/H.264

[Run multiple tweens with one common ease function]

Does the following match what you're after? 

See the Pen zsEAt by jamiejefferson (@jamiejefferson) on CodePen

 

Thx, I've added a case-control (with only one tween) to compare to the one with has 3 tweens: it's ok, they are in sync!

 

Here is the pen: 

See the Pen ONRwoO by abernier (@abernier) on CodePen