PCH

Welcome

Carl Schooff: Geek Ambassador
Support
Docs / Videos / Demos
Training

1998

2010

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

Brad Larson

Chris Gannon

Blake Bowen

Basic Timeline

full demo

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")

Go to the demos