Carl Schooff  |  |  @greensock

Beyond the Basics with GSAP



  • Carl Schooff: Geek Ambassador

  • Support

  • Docs / Videos / Demos

  • Training



Jack Doyle

  • Founder and Author of GSAP

  • Built a tweening engine because he needed one

  • Support became a full-time job

Today's Goals

  • Inspire

  • Educate

  • Level up

People often don't know what they don't know.

Today we will cover

  • Latest demos / sites
  • Complex sequences with nested timelines
  • Tween a tween, huh?
  • SVG is awesome
  • Draggable
  • Custom eases

Some Inspiration

Basic Timeline

Big timelines can be a mess

tl.staggerFrom(".g, .s, .a, .p", 0.75, {rotation:180, autoAlpha:0, x:100, ease:Back.easeOut}, 0.1)
  .staggerFrom(".the-greensock, .animation-platform", 0.5, {autoAlpha:0, y:20}, 0.1)
  .to('.f0', 0.5, {ease:Back.easeIn, scale:0.2, autoAlpha:0}, "+=1")
  .add("frame1") //performance
  .staggerFrom(".crazy-fast, .performance", 0.5, {autoAlpha:0, scale:0.2}, 0.2, "frame1+=0.4")
  .staggerTo(".crazy-fast, .performance", 0.5, {scale:3, autoAlpha:0, ease:Power3.easeIn}, 0, "frame1+=1.5")
  .staggerTo(".star", 0.1, {autoAlpha:1}, 0.02, "frame1")
  .staggerFrom(".star", 0.5, {x:150, y:125, scale:0.2, ease:Power1.easeIn}, 0.02, "frame1")
  .add("frame2") //compatibility
  .staggerFrom(".unparalleled path", 0.5, {autoAlpha:0, x:10, y: -12}, 0.05, "frame2")
  .staggerFrom(".compatibility path", 0.5, {autoAlpha:0, x:10, y: 24}, 0.05, "frame2")
  .staggerFrom(".logo", 0.6, {scale:0, ease:SlowMo.ease.config(0.7, 0.7)}, 0.65, "frame2+=0.8")
  .staggerFrom(".logo", 0.6, {alpha:0, ease:SlowMo.ease.config(0.7, 0.7, true)}, 0.65, "frame2+=0.8")
  .to(".f2", 0.1, {autoAlpha:0}, "+=0.5")
  .add("frame3", "-=0.5") //end
  .from(".greensockLogo", 0.5, {autoAlpha:0}, "frame3")
  .fromTo(".greensockLogo", 1, {scale:10, transformOrigin:"50% 50%"}, {scale:0.5, x:-50, y:-60}, "frame3")
  .staggerFrom(".start-animating-now, .greensockdotcom", 0.75, {x:100, autoAlpha:0,ease:Back.easeOut}, 0.2)
  .from(".payoff", 0.3, {opacity:0, x:100})
  .from(".studentLoans", 0.3, {opacity:0, x:-100})
  .staggerFrom(".loanEnd", 0.2, {opacity:0, y:80}, 0.1, "+=1")
  .from(".buyYour", 0.3, {opacity:0, x:100})
  .from(".momDad", 0.3, {opacity:0, x:-100})
  .staggerFrom(".houseEnd", 0.2, {opacity:0, y:80}, 0.1, "+=1")
  .from(".house", 0.5, {scale:0, opacity:0, ease:Back.easeOut})
  .from(".build", 0.3, {opacity:0, x:100})
  .from(".hospital", 0.3, {opacity:0, x:-100})
  .from(".hospitalSVG", 0.3, {scale:0, opacity:0, ease:Back.easeOut})
  .from(".slap", 0.3, {scale:0, opacity:0, ease:Back.easeOut}, "+=0.5")
  .from(".sign", 0.3, {scale:1.5, opacity:0, ease:Bounce.easeOut, transformOrigin:"50% 50%"}, "+=0.5")
  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

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 set OR tweened.

SVG is Awesome

  • Scalable / Responsive
  • Crisp
  • Low file size (mostly)
  • GSAP can animate the guts


<svg x="0px" y="0px" viewBox="0 0 570 150">
      <circle fill="none" cx="71.5" cy="77.5" r="50" stroke="blue" stroke-width="4"/>
      <rect fill="red" x="150" y="26"  width="103" height="103"  />


Animate SVG strokes with precision

PCH Logo Demo

Advanced SVG Shape Morphing

Animate SVG filter values

Solve transform-origin issues with SVG elements

Demo: transformOrigin vs svgOrigin

Drag, spin and throw SVG elements

Demo: Draggable and SVG

Drag and Drop with Draggable


Defines the style of motion

Expressive Easing


Use the demo above to test your own CustomEase



CustomWiggle Types




Break text into words, characters, lines

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 3 million sites 

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

  • Universally adopted on every major ad network

Learning Resources


PCH: Beyond the Basics of GSAP

By GreenSock

PCH: Beyond the Basics of GSAP

  • 1,490