Jump to content
Search Community

GSAP to CSS Keyframes/Animation

emmanuelulloa test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Here is a fun idea: use GSAP to generate CSS Code.

It would be a nice plugin to write a GSAP animation and have it output a CSS animation in N frames.

I imagine it would be something like what Bounce.js does (https://medium.com/tictail/bounce-js-smarter-keyframes-ffa13a501ea7#.9tdmhd7z3).

There are some environments that due to setup or legal issues it wouldn't allow to add a 3rd party library, but still you need to use the same timing/animation effects you used elsewhere.  A plugin that allows you to export your animation to CSS animation will certainly help a lot.

  • Like 1
Link to comment
Share on other sites

Till no GSAP to CSS compiler, we can render the whole banner to mp4 with PhantomJS and FFMpeg.

http://phantomjs.org/

This PhantomJS is an invisible browser with frame rendering capabilities. It is possible to seek and/or pause on separate frames of the timeline with a NodeJS script, dump the frames into a PNG folder and later FFMpeg them. 

 

Here is how it renders:
http://phantomjs.org/screen-capture.html

 

Now... what if we capture the whole CSS tree ( or something ) at every frame, make a table or json from it, which could serve as a pre recorded timeline for a simple recursive player?

Link to comment
Share on other sites

I have thought of doing something like this before, but I really struggled to justify the rather large time commitment it'd involve, especially in light of all the tradeoffs it'd force. CSS animations have quite a few very difficult limitations, making it almost impossible to replicate GSAP animations in CSS. For example, even something as simple as an Elastic.easeOut would require a ton of keyframes to mimic properly, and the code would get extremely verbose, plus it could never truly match the timing exactly. And then there are all the bugs with SVG and transforms and origins - CSS would flat-out break. And then what about controlling individual components of transforms independently with overlapping animations...it could be mimicked with CSS but once again a lot of keyframes would be necessary. You might end up with a TON of CSS that's as large or larger than GSAP itself. 

 

And then there are all the things GSAP can do that CSS simply can't, like morphing SVG shapes, scrolling, animating attributes, etc. I think it'd be frustrating for users to build something in GSAP and then use a tool like this to spit out a CSS keyframe animation and think "gosh, that sucks - my stuff isn't working. What did I do wrong? And why is the CSS 300kb?"

 

I imagine it'd turn into a nightmare to try to maintain and support longer-term. I feel pretty weird sinking a bunch of time into a tool that ultimately feels like a step backwards in terms of what's possible. We really want to push things forward and unlock possibilities for users. As a company, this kind of thing doesn't fit well with our vision.

 

That's not to insult the idea at all, though - I totally understand why this might appeal to a small audience that doesn't want to use JS for some reason, but I just don't think it's very common. In my experience at least, I almost never hear people saying that including a JS library is not doable and that they must use all CSS. In the modern web, it seems like JS is widely accepted as mandatory. 

  • Like 2
Link to comment
Share on other sites

Well Jack I understand that trying to do a 1 to 1 match between what GSAP can do and what CSS Animation can do if not imposible is not worth it.  My point is that so far there is no good tool to write css animations rather than write it yourself from scratch.  It would be great if there were a plug-in that allow us to use our knowledge to write JS animations to accelerate production of CSS code.  So far most major web development using CSS animations rely on Animate.css which is a group of premade css animations, eventually having the web looking the same.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...