Simon Tadros, programmer driven by his passion for entrepreneurial activities.Evangelist of Open Source, as he maintains that knowledge is for everyone. White hacker and security adviser known as evilqubit in white hacker community.As a blogger and writer have led many online groups for php community and launched with a small team an initiative through talk shows advises several young entrepreneurs and startups from the MENA region and often speaks about early stage development and entrepreneurship. Participated in many online activities and incubators clubs such as official representative for Arabnet developer tour and organiser of startupweekend .
Once upon a time, most developers used jQuery to animate things in the browser. Fade this, expand that; simple stuff.
projects got more aggressive...
The most widely-acclaimed solution was CSS Animations (and Transitions). CSS Animations have been talked about endlessly at conferences where phrases like "hardware accelerated" and "mobile-friendly" .
Tickle the ears of the audience.
Lack of independent scale/rotation/position control
The other part of "hardware acceleration" has to do with being able to use a different CPU thread for animation-related calculations ( only properties that don't affect document flow can truly be relegated to a different thread ) transform an opacity
Crank up the number of dots and see how jQuery, GSAP, and Zepto compare .
Using CSS keyframes animation, You cannot seek to a particular spot in the animation, nor can you smoothly reverse part-way through or alter the time scale or add callbacks at certain spots or bind them to a rich set of playback events
- Allows animations to be nested inside other animations as deeply as you want
- Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc.
- Callbacks for when an animation starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks
Workflow winner: GSAP
You can't really do any of the following with CSS animations:
Animate along a curve (like a Bezier path).
- Use interesting eases like elastic or bounce or a rough ease. There's a cubic-bezier() option, but it only allows 2 control points, so it's pretty limited.
- Use different eases for different properties in a CSS keyframe animation; eases apply to the whole keyframe.
- Physics-based motion. For example, the smooth momentum-based flicking and snap-back implemented in this Draggable demo.
- Animate the scroll position
- Directional rotation (like "animate to exactly 270 degrees in the shortest direction, clockwise or counter-clockwise").
CSS animations "bad"? Certainly not. In fact, they're great for simple transitions between states (like rollovers) when compatibility with older browsers isn't required.
I'd encourage you to do your own testing to see which technology delivers the smoothest animation in your particular project(s). Don't buy the myth that CSS animations are always faster, and also don't assume that the speed test above reflects what you'd see in your apps. Test, test, test.
By Simon Tadros