Atmospheric and Elemental motion

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-18
Updated:
2016-11-18
Tags:
animation libraries
  • 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 motion

She 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;
}