Simplify

[universaldenmark]

Very nice tool, but many animations gets quite a lot of CSS-code for most of the presets. A "simplify" button would be nice, so the code maybe do the animation in fever steps and therefore saves some kb. Maybe a slider, so the user can find the perfect point between smooth animation and an acceptable number of CSS-lines.

[JoelBesada]

At the moment the code just generates 60 keyframes for each second, but I'm planning on trying out some sort of simple algorithm that could determine the significant points on the easing curve and only place the keyframes there.

Ideally, if that works out, the number of keyframes could be reduced without affecting the smoothness of the animation at all.

[universaldenmark]

Ahhh thats why. Yeah potentially whats archived in 2 lines of css, could be 1000 lines of code here depending on the time. I'll look back when its updated. Its a tool with a lot of potential :)

[tbredin]

Big, big +1 to this. Can we reopen this issue? - Feels like a pretty serious unaddressed problem.

I want to thank you for the tool, it's awesome. But, to be frank, I feel like it's currently kinda unusable in production - which brings me great developer sadness! It's pretty unnecessary to output over 1000 lines of CSS once prefixed; 60 key frames per second is probably huge overkill in my opinion - 30 keyframes would still easily be more than enough (are you really gaining anything by setting the 1 frame in between?), and I think that 15-20 may even work well in most scenarios (may need testing / a live demo?).

Obviously your idea of algorithms to find the important parts of the animation sounds great and would be even better, but that sounds quite difficult by comparison. I think that based on how popular this tool was out in the wild, there will be a lot of naive devs massively bloating their CSS with thousands (tens of thousands?) of lines of code, and that you perhaps should feel some responsibility/urgency to find a quick fix to minimise the bloat?

Personally, I'd feel ok about using this if i could get an option for 20 - 30 keyframes, which I think would put most animations into an acceptable range of complexity for production.

Note the animation will still run at 60fps with tweened frames, it will just do so with vastly less of a performance hit and CSS weight.

Keep up the great work though, I've been looking for a tool to do elegant bounce eases in CSS animations for some time!

[tbredin]

Just for some perspective on how important this really is; adding just 4 bouncejs animations more than doubled the size of my stylesheet. I became sad

[JoelBesada]

@tbredin I see your concern about this, so I've reduced it down to 30 keyframes per second for now, until I find time to write that algorithm that sets keyframes at the optimal points. The difference is hardly noticeable unless you play the animations back at a slower rate (e.g. pressing the slow-motion button on the tool), but since the animations are intended to run for the duration that the user sets in the sidebar, it should be fine.

I'd rather not introduce an option for setting the number of keyframes yourself, since I want to keep the tool as simple as possible and don't feel comfortable with adding more complexity than it already has.

[tbredin]

Nice one! Thanks, should help lighten up my sheets. I'm sensitive to your concerns of making it too complex, but still think it'd be useful to have for developers who tend to demand a fine tuned level of control.

"Show advanced options" button, perhaps, maybe? :p