Intro to Greensock Web Animation

Download Sample Files

Check out our Web Design Classes
These slides are for the webinar: Intro to GreenSock Web Animation

We’re Going To Discuss

• Overview of GreenSock
• Example Web Animations
• Things To Know about Ad Banners (with Examples)
• Live Coding Demo
• Amazing GreenSock Plugins
• Ways to Learn More

What is GreenSock?

The GreenSock Animation Platform (GSAP) is a JavaScript library focused solely on animation.

It enables you to create ultra high-performance,
professional-grade animation for the web.

GSAP is not an app. Use HTML & CSS to code the content.
Use GSAP & JavaScript to code the animation.

Things to Know About GSAP

• It’s been around since 2006.
• Used on over 3 million live websites & used by top brands:
• Universally accepted on every major ad network.

What People Say About It

GSAP “is far and away my favorite library to work with”
Sarah Drasner said in a comparison of
animation technologies on css-tricks.com

Why use GSAP?

Examples of GSAP

• Superlist
• Google Maps Local Guides
• Netlify
• Netlify: 1 million devs
• Web Designer Claudio Calautti
• Firefox Loading Animation by Nerdmanship
• More at GreenSock’s Examples & Showcases

What About Banner Ads?

• GreenSock is an industry standard that’s accepted on every major ad network.
• When using the Google-hosted GSAP file, it does not count against your ad’s file size!
• Animated GIFs can’t compare to what you can create with GSAP.

Example Ads

• Mazda by Craig Wheatley
• World of Tanks: Defender & Destroy by VolcanoFlash

GSAP is Modular

• GSAP’s core provides the essential functionality.
• There are additional features, but you only load them if needed (to keep the file size small).
  • Plugins: ScrollTrigger, Text, and more
  • Some plugins are only for Club GreenSock members: SplitText, DrawSVG, MorphSVG, etc.
  • Extra Eases: SlowMo, CustomBounce, CustomWiggle, etc.
  • To see what’s included/extra refer to the GSAP Docs.

Let’s Code Some GSAP!

Live Demo

Plugins

Add functionality beyond GSAP’s core features.

ScrollTrigger

Create scroll-driven animations.
People frequently ask how to do these kinds of animations!

SplitText

DrawSVG

MorphSVG

Core Strengths

• GSAP “just works” everywhere.
• Excels at complex, story-telling animations.
• Solves real-world problems (workflow, SVG, and more.).
• No dependencies. (It can work with libraries such as jQuery, but does not rely on them.)
• Great documentation and support
• Funded (not a side project or hobby)

Licensing

• Core tools are free, unless you charge people to access your site, app, etc. Then you need a Club GreenSock membership.
• Licensing info & Why license?
• Purchase a Club GreenSock membership & you get bonus tools such as SplitText, DrawSVG, MorphSVG, etc.
• Take our JavaScript for Front-End (which gets you started with JavaScript and GSAP) and you’ll receive 10% off your Club GreenSock membership.

Learn More

Learn JavaScript & GreenSock in Noble Desktop’s
JavaScript for Front-End course

Learn HTML, CSS, JS, GreenSock, and more in Noble Desktop’s
Web Design & Development Certificates