Carl Schooff  |  greensock.com  |  @greensock

GSAP Workflow Tips

CSS Summit 2016

Welcome

  • Carl Schooff: Geek Ambassador

  • Support and training

1998

2010

Welcome

  • Jack Doyle: Founder and Author of GSAP

This presentation is about

  • Timelines
  • Workflow tips
  • Advanced features
  • Experimentation
  • Real-world challenges

Audience

  • Those who want to take their GSAP skills to next level
  • Anyone interested in web animation

What is GSAP

  • GreenSock Animation Platform
  • A suite of high-performance JS tools for animation
  • Create animation with code

Basic Tween

Basic Timeline

Animation Objects

  • Tweens and timelines both inherit from an Animation class
  • They share the same core methods and properties

play()

pause()

resume()

reverse()

seek()

progress()

restart()

timeScale()

delay()

duration()

isActive()

kill()

 

startTime()

time()

timeScale()

eventCallback()

...and more

  • Your application logic doesn't need to be concerned with which type of Animation object it is dealing with

Demonstrate

Key Timeline Features

  1. keeps code modular
  2. change order of sections
  3. tweak overlap / offset
  4. change speed of section

GreenSock Home Page Animation

View full source on CodePen

Demonstrate

Functions Returning Timelines

Re-usable Effects

Create functions that return animations with
complex movement

Tween a tween! Huh?

  • progress()
  • timeScale()
  • time()

Animation objects have numeric,
function-based properties that can
be tweened

Solving Common, Real-world Problems

Advanced SVG Shape Morphing

Intercept and modify values while tween is running

Demo: Snap to 45 degree increments

Intercept and modify values while tween is running

Demo: Seamless carousel wrap

Solve transform-origin issues with SVG elements

Demo: transformOrigin vs svgOrigin

Drag, spin and throw SVG elements

Demo: Draggable and SVG

Create staggered, alternating and randomized effects

Demo: Staggered animations using cycle

GSAP Strengths

 

  • No dependencies (other libs or rendering layer)

  • Plugin architecture

  • Support and documentation

  • Funded – not a side project or hobby

  • Used on over 1.5 million sites 

  • Majority of award-winning sites use GSAP (report)

  • Universally adopted on every major ad network

Learning Resources

Thanks!