CodePen Meetup NYC

April, 2015

Carl Schooff  |  greensock.com  |  @greensock

Today's Talk

  • Introduction

  • CodePen is awesome

  • GSAP and SVG

  • Free stuff

Who am I?

  • Carl Schooff, Geek Ambassador at GreenSock

  • I live and breathe the GreenSock Animation Platform (GSAP)

  • Support, Documentation, Learning Resources, Training

What is GSAP?

  • Suite of high-performance JS animation tools
  • Recommended by Google
  • Used by major brands:

GSAP Highlights

  • Built for professionals, yet beginner friendly

  • Solves real-world problems (workflow, prefixing, SVG)

  • No dependencies (other libs or rendering layer)
  • Excels at complex, story-telling animations

GreenSock ♥ CodePen

  • Editor of choice for 95% of what I do
  • Demos, docs, support, training

  • Love the social / sharing aspects

  • CodePen's support

Demo or it didn't happen

Demo or don't be surprised if it takes me a really long time to give you a vague guess of what the problem might be.

:)

Wasted effort

Have a problem? Show us a pen

Wasted effort

No, really. A demo would be a big help.

CodePen: the new resume

Have a favorite? Heart it / Share it

Animating SVG with GSAP

transformOrigin issues: solved

Read full article on css-tricks.com with demos and videos

SVG Animation and CSS Transforms: A Complicated Love Story

svgOrigin

learn more

DrawSVGPlugin

Fully control how SVG strokes are revealed 

Let's build this SVG Logo Animation

click logo to replay

Visit the Starter Pen

Visit the Finished Pen

A gift from GreenSock to all attendees

coupon code purposefully obfuscated

 

All GreenSock premium tools

are free to use on CodePen.

DrawSVGPlugin

ThrowPropsPlugin

ScrambleTextPlugin

Physics2DPlugin

PhysicsPropsPlugin

SplitText

Thanks!

Made with Slides.com