Server-side rendering of an animation

[CG1]

I'm in the early staged of researching the best tools out there for helping me to build out an app that allows a user to build something along the lines of animated banner ads, save the animation and then render that animation as a video. The rendering would need to be done on the server-side rather than in the browser. So here are a couple of dumb questions that some kind people may be able to give me some pointers on before I go too far down the rabbit hole here:

 

1. Is what I'm describing above even possible? I've seen suggestion on the forums here of taking the output of the animation, converting it to keyframes and then possibly re-assembling that as a video. Are there any examples of this actually being executed successfully? 

2. Is there a Greensock version of fabricjs' main object that you can store and then replay later on to load up the same state again? I'm imaging an editor where I'm able to do something as simple as animate some text from point A to point B - save this and then return later and edit that same design. I haven't been able to find anything in the documentation so far that gives any guidance on this but I am just scratching the surface here at the moment!

 

Thanks in advance.

[OSUblake]

18 minutes ago, CG1 said:

1. Is what I'm describing above even possible? I've seen suggestion on the forums here of taking the output of the animation, converting it to keyframes and then possibly re-assembling that as a video. Are there any examples of this actually being executed successfully? 

 

You can probably use puppeteer.

https://github.com/puppeteer/puppeteer

 

Here's a script I found for a gsap animation.

https://gist.github.com/mallendeo/8f589d9e828ebfec287a77be71b6c4d3

 

21 minutes ago, CG1 said:

2. Is there a Greensock version of fabricjs' main object that you can store and then replay later on to load up the same state again? I'm imaging an editor where I'm able to do something as simple as animate some text from point A to point B - save this and then return later and edit that same design. I haven't been able to find anything in the documentation so far that gives any guidance on this but I am just scratching the surface here at the moment!

 

No, but what's wrong with saving a file? Or using an online editor like codepen, codesandbox, or stackblitz?

 

 

[CG1]

27 minutes ago, OSUblake said:

 

You can probably use puppeteer.

https://github.com/puppeteer/puppeteer

 

Here's a script I found for a gsap animation.

https://gist.github.com/mallendeo/8f589d9e828ebfec287a77be71b6c4d3

 

 

No, but what's wrong with saving a file? Or using an online editor like codepen, codesandbox, or stackblitz?

 

 

Hi Blake - cheers for the response.

 

I may not have explained point two very clearly. The use-case would be something like:

 

1. User opens an animation editor. Adds a text object. Defines a tween. The text now shows on screen moving from point A to point B in a timeframe of 5 seconds.

2. The user clicks save. I need to persist something into a database table that can be "replayed" or loaded up the next time the user comes back.

3. User comes back to edit the animation as they want to change the tween to now be 10 seconds long instead due to a change in requirements.

 

I guess the question is - what is that "thing" that I store in the database to load up the configuration applied before or is it a case of storing the actual JavaScript used to build up the Gsap animation? Thats definitely something I'd consider doing if it was the right way to do things. 

 

Chris

[ZachSaucier]

15 minutes ago, CG1 said:

1. User opens an animation editor. Adds a text object. Defines a tween. The text now shows on screen moving from point A to point B in a timeframe of 5 seconds.

2. The user clicks save. I need to persist something into a database table that can be "replayed" or loaded up the next time the user comes back.

3. User comes back to edit the animation as they want to change the tween to now be 10 seconds long instead due to a change in requirements.

This sounds like you want a visual editor for GSAP. There is no official one but there are a few visual editors that claim to export to GSAP code (they're all limited in what you can do). The only one that I'm aware of being still maintained is Pinegrow. 

[OSUblake]

36 minutes ago, CG1 said:

I guess the question is - what is that "thing" that I store in the database to load up the configuration applied before or is it a case of storing the actual JavaScript used to build up the Gsap animation? Thats definitely something I'd consider doing if it was the right way to do things. 

 

Your editor would probably need to create a json representation of everything, like as a tree/graph, then you can store that in a database and restore the users work. Something like this.

 

See the Pen f996414a7e486937f93a7dbabba79b51 by osublake (@osublake) on CodePen

 

 

[CG1]

Thanks guys - plenty of food for thought there. Looking forward to getting into this!