Atmospheric and Elemental motion
- Further way is less contrast, blurry
- Reducing precision allows for understanding
- aire or environnent effect movement
- combine techniques (add several layers of effects and elements)
How to animate a puff of smoke?
Brake it down to core things. For example a smoke into bubbles (circles). Move around, resize the main parts (the circles).
Sprite and elemental motionShe recommends GSAP for cross-browser compatibility. Otherwise you have to do workarounds with CSS animations:
#heart {
animation: heartpop 2s 1.25s ease-out both;
transform-origin: 50% 50%;
transform: scale(0);
-moz-transform: scale(1); //firefox transform-origin svg bug hack
}
/*had to split the heart animation in two due to a bad safari
svg bug that doesn't allow for opacity and transform*/
#heartopacity {
animation: heartopacity 1.5s 1s ease-out both;
opacity: 0;
}
#floaty {
opacity: 0.2;
animation: floataround 3s ease-in-out infinite both;
transform-origin: 50% 50%;
animation-iteration-count: 30;
}