Generate JS from TimelineMax instance

[Gary]

Our graphical animation editor, which uses GreenSock, will be online at www.snazzy.media in the next few months.   We generate nested timelines dynamically, from a context model that the user builds with a GUI (with patent-pending snap-together blocks).  It's all very cool and I'm looking forward to sharing it.  

 

However, we're running into a handful of weird timeline errors with the resulting animation.  Since there is a lot of infrastructure on top of the generation, it is difficult to "visualize" a problem in code, and to create codepens.  What I think would be helpful is some way to take a TimelineMax object and reverse-engineer it into Javascript.  

 

My question is; is there an existing way to create javascript for an existing timeline that, when run, would rebuild the same timeline?  If not, is it even possible to do that?  Does the timeline instance have enough state embedded that could be used to generate javascript?

 

Thanks,

Gary

[GreenSock]

I'm a bit confused - the only way you can create a TimelineLite or TimelineMax is through JavaScript in the first place, so why are you looking for a way to re-generate that code the opposite direction? In other words, you already have the JS to begin with, right? 

 

I suppose most of the data you could get by using various methods, like getChildren(), and then loop through those and iterate the the "vars" object of each, grab the duration() and startTime(), etc. What may be more difficult is the target of each tween, since those could reference actual objects which aren't always able to be represented in string form, and the same goes for callback functions. But again, most of the data is there for you if you tap into the API appropriately. See the docs for details. http://greensock.com/docs/#/HTML5/GSAP/

[Gary]

>> the only way you can create a TimelineLite or TimelineMax is through JavaScript in the first place.

 

Yeah, but my code is not a simple script.  It's a large object-oriented model, in Typescript, that recursively generates a hierarchy of timelines. I didn't think something like this existed, since I suspect few GSAP users use it like we do. It was worth asking, though.  

 

 

I solved the bug that triggered me to ask.  If we need to, we'll build something to spit out Javascript.

 

Thanks again!

Gary

[jamiejefferson]

Here's a rough example that combines the getChildren method of timelines and properties of timelines and tweens such as vars to try and export some javascript.

 

See the Pen eEyhl?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

 

I think the hardest thing to get right would be the tween targets. GSAP stores the DOM node/nodes for the target, but turning that into standalone raw JS is a bit trickier. If the target DOM node doesn't have an id, then how would you generate a selector for it? I'm not sure, but if you could add some recording into the tool you've created then you might have an easier time reproducing the exact code you need?

[Carl]

Jamie,

 

You crazy!

 

Wow.

 

- Carl

[Gary]

Awesome.  Thanks, Jamie!

[Rodrigo]

Great stuff Jamie, cheers!!