Bay Area Codepen Meetup 2015

Sarah Drasner - Codepen: sdras Twitter: sarah_edo

ANimation Performance


  • Don't need to load multiple img resources
  • Smooth edges on any display (not lossy)
  • Can easily scale to it's container if you take out the width and height - hell yeah responsive!
  • SVG is real content, as opposed to Canvas which is usually just pixels (more semantic)
  • Sara Soueidan's site has tons of great resources
  • fun!

Easy Syntax

TweenLite/TweenMax .to/.from/.fromTo ( variable, seconds { property:amount, ease });"div", 2, { 
    scaleY:0.75, scaleX:1.25, y:100, opacity:0.75, ease:Elastic.easeOut 

For help with easing: GSAP's Ease Visualizer


Things like stagger are really complicated to do in CSS animation, and in GSAP are one line of code.

TweenMax.staggerTo(".squares", 2, {
    y:100, backgroundColor:"#4f9d88", ease:Elastic.easeOut
}, 0.05);
TweenMax.staggerTo(".squares", 2, {
    rotation:200, delay:1, scale:0.5, backgroundColor:"#72b165", ease:Elastic.easeOut
}, 0.025);


TweenMax.set($(".squares"), {
    css:{transformPerspective:200, perspective:200, transformStyle:"preserve-3d"}
});$(".squares"), 2.5, {
    css:{rotationX:230, z:-150}, y:180, opacity:0.2, ease:Power2.easeOut
}, "+=0.2");

GSAP Solves TRansForm Origin Issues

This might be the #1 Issue to use GSAP






Remember all those cool pens that seem to draw themselves?

TweenMax.staggerFromTo($draw, 4,{ drawSVG:'0' }, { drawSVG: true }, 0.1);

Motion Along a Path

This is one of the coolest things about SMIL, but the promise of support has a longer tail with GreenSock.$firefly1, 6, {
bezier: {
  values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, {x:30, y:20}, {x:10, y:30}],
ease:Linear.easeNone, repeat:-1}, "start+=3");
  • Backwards compatibility and cross browser support is way better: even IE! (SMIL does not offer that)
  • SMIL motion along a path will probably continue to be unsupported in IE, but support for this feature will move into CSS. However, this is down the line. In the meantime, use GSAP for the widest support.
  • Currently you pass an array of coordinates in GSAP. In the future you will be also be able to specify an SVG path.

Motion along a path: Fireflies


Easily one of GreenSock's most powerful tools. The last pen would not have been possible without it.

  • stack tweens
  • set them a little before and after one another
  • change their placement in time
  • group them into scenes
  • animate the scenes!
  • make the whole thing faster, move the placement of the whole scene, nesting

all without recalculation


Move things around and make them interactive!

Draggable.create($objects, {

PUtting it all together to Tell a story

Other People to Follow on Codepen For SVG ANIMATION

  • GreenSock (clearly)

  • SaraSoueidan

  • tmrDevelops (Tiffany Rayside)

  • sol0mka (LegoMushroom)

  • lbebber (Lucas Bebber)

  • grayghostvisuals (Dennis Gaebel)

  • chrisgannon (Chris Gannon)

  • Chris Coyier's SVG Fancytown Collection

  • valhead

  • jonitrythall


All pens made by me with the exception of cross-browser transformation origin gifs. Special thanks to Jack Doyle and Carl Schooff of GreenSock, and to Codepen for inviting me!

Follow me on codepen!