Carl Schooff  |  greensock.com  |  @greensock

Beyond the Basics with GSAP

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

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 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"  />
</svg>

DrawSVGPlugin

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

Easing

Defines the style of motion

Expressive Easing

CustomEase

Use the demo above to test your own CustomEase

CustomEase.getSVGData()

CustomWiggle

CustomWiggle Types

CustomBounce

BONUS

SplitText

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

Thanks!

PCH: Beyond the Basics of GSAP

By GreenSock

PCH: Beyond the Basics of GSAP

  • 1,057