[GSDevTools has issues with Timelines with useFrames set to true]

On 10/26/2018 at 12:26 AM, GreenSock said:

For example, build it as if 1 second = 1 frame (just to make the numbers easy) and then adjust the timeScale() to 30 to make it play at that rate.

Great advice!

Thanks for the tips and the added context about resolution independence. I'll give this a try.

PS - I've definitely experienced the downsides of frame-based animations (and lack of "resolution-independence") previously with TweenJS.

[GSDevTools has issues with Timelines with useFrames set to true]

On 10/26/2018 at 1:00 AM, OSUblake said:

Nobody uses frames

Well, not *nobody*, right? As I said, my source (which was created with Adobe Animate) solely deals in frames.

 

On 10/26/2018 at 1:00 AM, OSUblake said:

you can easily convert your frame values to seconds

Yep. I was just trying to respond to @GreenSock's question about what seemed appealing to me about `useFrames`. FWIW, I've found there are some contexts in which the seemingly easy math of time->frame (and vice versa) gets a monkey wrench thrown into it (e.g. Video playback in Chrome doesn't have a consistent frame duration regardless of the source. So, if you actually want to advance a video frame-by-frame, it's impossible.).

[GSDevTools has issues with Timelines with useFrames set to true]

I'm new to GreenSock. So I'll say upfront that I may have misconceptions based in ignorance.

 

That being said, my primary exploration with the tool right now (2 days in) is with the following use-case:

I have an animation that was created using a different frame-based tool. I'm currently manually translating that animation in code (as preparation to automate it in the future) with GSAP + PixiJS. Having a frame-based source (30 fps, FWIW) makes features like `useFrames` very appealing because it's a 1-to-1 transcription when creating Timelines and Tweens.

 

Is that a compelling use case? Any tips for me?

[GSDevTools has issues with Timelines with useFrames set to true]

The attached Codepen is identical to the "GSDevTools - Step 2: Give Animations IDs" example, except that the `tl` Timeline specifies `useFrames` as true.

 

Expected behavior:

"orange", "green", and "grey" should appear in addition to "Global Timeline" in the GSDevTools timeline list.

 

Actual behavior:

Only "grey" appears in addition to "Global Timeline". "orange" and "green" (notably children of the `useFrames` Timeline) no longer appear.

See the Pen gBZZzR by mattkahl (@mattkahl) on CodePen