Develop Reference

Using Javascript animation library VS creating dynamically <style> tags to be injected in the header

We are creating a complex single page application, which allow an user to create animations on some widgets, example a widget button could be animated from left to right and change its opacity during x second. Also another widget can influence the animation of another, making a transaction animation on top of another.
Animations can be defined by an user and triggered by JavaScript application in a quite complex way. Animations could be edited in several combinations and date for animations is created using OOP approach.
Animation could be reverted, paused, played.
Regarding the animation technology we are evaluating currently two options:
01 - Using CSS Transition, creating necessary CSS classes dynamically and injecting the tags in the header of the page. The animations will be added to the dom also switching classes will be handled.
02 - Using a JS library like Velocity.js or Greensock, animating the DOM accordingly using JS so only using inline style.
03 - Web Animation API (and CSS Animation), we have tried this approach but we found some specific limitation.
I would like your feedback:
Approach 01:
Is manageable in JS in term of programmatic control.
Is it possible to edit dynamically a property in a tag without causing flickering and not using complex regex?
Are you aware of any issue with adding tags dynamically in the Header, like flickering.
Have you found CSS Transition lack of performance when multiple animation are running in parallels.
Do you know some project using this approach?
What about control of animation, like reverse, stop, pause.
Approach 02:
Do you think is this approach generally more manageable by JS?
Any CONS on this which would make chose approach 01 instead?
What about control of animation?
Any feedback is very welcome.
Some useful article I read
https://davidwalsh.name/css-js-animation

Since you have complex animation that can be manipulated mid-execution, do it with JS and not CSS. What library you will be using depends on you.

The problem with using a JS library is that you will then have to debug both hardware animations and JS animations. On top of that you would also have to learn all the quirks within those libraries. In the last 3 years i've found CSS animations and transitions to be simpler and thus better due to the fact that debugging is simpler. Debugging is key when it comes to animations on the web.
With that said there are a plethora of ready-to-use helpers (or libraries if you will) that makes it much simpler to work with more complex CSS animations and transitions. If i were you i would start with checking out the existing libraries and see if any of them meet your requirements.
Here is two small libaries using CSS animations:
https://github.com/FelixRilling/microAnimate
https://github.com/daniel-lundin/snabbt.js
Many of these would support you saving user animations in the way you describe.
Example from microAnimate:
var myAdvancedAnimation = new Anim(
document.getElementById("square"), {
"0%": [
["width", "200px"],
["color", "transparent"]
],
"20%": [
["width", "100px"],
["color", "#fff"],
function() {
console.log("callback 2");
}
],
"100%": [
["width", "60px"],
["color", "red"],
function() {
console.log("callback 3");
}
]
}, {
duration: 2000,
ticklength: 30,
ease: true,
retainEndState: true,
loop: false
}
);
As you see it would be trivial to let the user save a specific animation since it's just objects and arrays that could be saved to users localStorage or a central database. It would also make it simple to have animationType A influence animationType B.

React color animation synchronization

I have been using react to build out an editor. One of the configurable properties is to dynamically generate background color animation. For example, an infinite fade in and fade out with a x second period.
The problem is that the color animation needs to be same and synchronized in multiple views. CSS animations does not enable that synchronization without being hacky. I want to use 'react-motion' but it does not incorporate timing easily.
Looking for some concrete examples using react + react libraries (ideally react-motion). Thanks in advance.

Not a direct answer to your request for examples using react + react libraries, but, if you're rendering on the client/browser you can use a global var for keeping sync between views. If that is too "hacky" for you, then perhaps finding a common parent up the ladder that both views can be handed a synchronized var/value.

After doing quite a bit of research into all of this, it turns out that the answer is just working at the animation frame level.
CSS animations abstracts all of this away from devs but as a result it gives very little control between animations.
React Motion react-motion while a good library for dealing with transition animations (it's intended purpose) again does not address controls between animations.
They key though exists in the react-motion code. You just have to request animation frames one after the other using raf library and then calculate the animations per view using the common frame info. It's pretty tedious and no real generic solution here.

Use Javascript or CSS3 for animations?

I have been wondering what's better for animation in terms of performance - Javascript or CSS3.
On this page you have a comparision between GSAP, jQuery and CSS3:
http://css-tricks.com/myth-busting-css-animations-vs-javascript/
Scroll down to performance comparision. Now my Question is the following:
Will CSS3 sooner or later be faster than Javascript(GSAP in this case)? So should we program animations with CSS3 or still with Javascript?
Update: Another website:
http://greensock.com/transitions/
As it looks right now, GSAP is faster than CSS3 in most ways, but in 3D transforms CSS3 is faster.
The question now still is: Will CSS3 be faster than GSAP(or other comparable frameworks)?

CSS3 animations are faster and smoother than JavaScript animations because they can be optimised and potentially hardware accelerated by the browser/GPU. JS animations on the other hand are usually a little less smooth because each frame of the animation has to be explicitly interpreted an rendered.
Also, JS animations are used mainly for older browsers which don't support CSS3, which is relatively new.

Here's an approximation of how animations work:
CSS3: "Please transition this as smoothly as reasonably possible."
JavaScript (naive): "Okay, so first you move here, then you move here, then here... are you keeping up?" [Browser:] "MAKE UP YOUR MIND!"
JavaScript (delta timing): "Okay, move here. Damn, you're slow. Okay, move over here so it looks like you're not lagging."
jQuery: "I don't care how it's done, just do it. Bye!"
The winner, in my opinion, is CSS3.

It seems that there are only four css properties that get real hardware acceleration as Paul Lewis and Paul Irish explain here: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ (very interesting read!).
Those are: position, scale, rotation and opacity
All other css properties get nothing in most browsers and might therefore be slow.
So yes, some CSS animations are already super smooth and the rest will get faster in time.
Especially on mobile devices. (More technical stuff in the other answers)
But soon after that happens, libraries like GSAP and jQuery will (under the hood) change their animation method anyway. They could even choose the method that is faster depending on the device the site is running on.
(For example: You can already use the transit plugin for jQuery to use CSS3 animations from jQuery. http://ricostacruz.com/jquery.transit/)
So:
Will CSS3 be faster than Javascript?
Yes. But:
Should we program animations with CSS3 or still with Javascript?
That is a diffent story and depend on your needs.
If you animate a little hover effect using opacity: The CSS3 is probalby your way to go. Easy, clean, fast.
For complex animations, different interactions, etc. you will need to use JS which also gives you the flexibility of choosing the animation method later on.
Especially GSAP is ridiculous powerful and easy to write.

jQuery instead of Flash animation

I'm trying to find a way to replace the flash animaton on this page http://www.autopulsen.se/ into jQuery. I could cut the images out and rotate them with javascript but it would require major changes in code. Basically I want to keep the same look without flash.
Is this possible?

Yes, you can.
Your starting point would be having a look at this site, there are a lot of zoom plugins on there, which is the main feature of that flash menu. Then you would want to chain the JQuery Shake effect, and maybe look at the fade effect.
To achieve the slanted look you will want to use the skew css selector as featured here.

I'll throw in GreenSock Animation Platform:
www.greensock.com/gsap-js
which may be worth a look, especially if there's the option of paying for a commercial license, as that includes a pretty nifty throwProps plugin.

you can use CSS3 animation but this one i think so good and hard to built in css3
anyway
giving you some animation generator
ceaser
CSS3animationGenrator
Css3Maker
and this one for Inspiration
At DesignShack

Creating animations using native javascript

I am interested in creating various kinds and types of javascript animations using traditional javascript (no frameworks) and canvas. My question is can anyone point me to resources (books/sites etc) that would be useful. I know that many frameworks already exist but my learning object is to understand the core language.

Animation is basically an attribute change over time. To achieve this you use setInterval to make sure the change takes effect gradually. In every step you calculate the current value of an attribute by interpolating between two values, considering elapsed time. As a final touch you can add easing to your animations to make transitions look smooth between states. Animation queues can also be added.
Recommended - Roll Your Own Effects Framework by Thomas Fuchs

There is a plethora of articles discussing this, available on the intertubes.
One key technique is to use setTimeout() to modify the opacity of an item, stepwise. This is basically what jquery UI - one of the frameworks you mentioned - does to implement animations, fades, slideouts, etc.