GSAP Crash Course
Who is this clown?
Who is this clown?
Who is this clown?
GreenSock Animation Platform (GSAP)
Created by Jack Doyle
Created a tweening engine at his day job because he needed one
People loved it and it grew until supporting it became his full time job
GreenSock Animation Platform (GSAP)
It's a Tweening engine.
The word tween is from circa 1300 - an abbreviation of 'between'.
GreenSock Animation Platform (GSAP)
It's a Tweening engine.
The word tween is from circa 1300 - an abbreviation of 'between'.
At its most basic all GSAP does is interpolate numbers in JavaScript.
The power of GSAP comes from its flexibility and rich plugins.
Some Inspiration:
Craig Roblewsky: https://codepen.io/PointC/full/mmMXQK/
Jonathan Marzullo: https://codepen.io/jonathan/full/NqZPwd/
Blake Bowen: https://codepen.io/osublake/full/VMyeqZ/
Mine: https://codepen.io/dipscom/full/zBoQXV/
GSAP Basics
TweenLite - Core engine�TweenMax - Bundle of everything you'll need 90% of the time (TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin)�TimelineLite & TimelineMax - Sequencing tools for tweens. Group and control tweens in sequence and their timings.�Many extras: Draggable, DrawSVG, MorphSVG, ScrambleTextPlugin
GSAP Basics - Simple Tween
TweenLite.to( '.className', 1, { x:100 } );
const tween = TweenLite.to( '.className', 1, { x:100 } );
Syntax: TweenLite.method( selector, dur, vars );
GSAP Basics - Simple Timeline
new TimelineLite().add( TweenLite.to( '.className', 1, { x:100 } ).add( TweenLite.to( '.className', 1, { y:100 } );
new TimelineLite()� .add( TweenLite.to( '.className', 1, { x:100 } )� .add( TweenLite.to( '.className', 1, { y:100 } );
GSAP Basics - Simple Timeline
const tl = new TimelineLite();
tl.add( TweenLite.to( '.className', 1, { x:100 } );�tl.add( TweenLite.to( '.className', 1, { y:100 } );
GSAP Basics - Simple Timeline
const tl = new TimelineLite();
tl.to( '.className', 1, { x:100 } )� .to( '.className', 1, { y:100 } );
Syntax: Timeline.method( selector, dur, vars, position );
Simple examples:
Simple DOM manipulation (CSSPlugin) - https://codepen.io/dipscom/pen/KxoNbQ/�Simple CSS selector - https://codepen.io/dipscom/pen/KxoWjg/�Simple SVG manipulation (AttrPlugin) - https://codepen.io/dipscom/pen/XPEMmK/�SVG Pattern - https://codepen.io/dipscom/pen/zrBNLM�Using functions to build a timeline - https://codepen.io/dipscom/pen/XmJoLN�Tween a tween - https://codepen.io/GreenSock/pen/jAKbxp�Stagger Animation with Cycle - https://codepen.io/GreenSock/pen/EVxBXz�Function based values - https://codepen.io/GreenSock/pen/BzmGba�Follow mouse (onTick) - https://codepen.io/dipscom/pen/OQQMXP��
Simple examples, Plugins:
Modifiers Plugin - https://codepen.io/GreenSock/pen/BzJxBB?editors=0010�Custom Wiggle - https://codepen.io/GreenSock/pen/GrggOL�Custom Bounce - https://codepen.io/GreenSock/pen/pRowwX�Custom ease - https://greensock.com/docs/Easing/CustomEase��
Learning & Resources
GSAP Getting Started - https://greensock.com/get-started-js�GSAP Forums - https://greensock.com/forums/�GSAP Learning resources - https://greensock.com/learning�