Download presentation
Presentation is loading. Please wait.
1
A Lightning Talk on the GreenSock Animation Platform
Animating with GSAP A Lightning Talk on the GreenSock Animation Platform
2
To Tween …
3
The Libraries TweenLite.js: The foundation of GSAP, which handles tweening of one or more of any numeric property of any object. TweenMax.js: “Extends TweenLite by adding repeat(), repeatDelay(), yoyo(), support for staggered tweens", and some non-essential, but very useful plugins, (greensock.com/tweenmax). TimelineLite.js: A timeline class for building and managing sequenced transitions. “… like a container where you place tweens (or other timelines) over the course of time.” TimelineMax.js: Extends TimelineLite by adding repeat(), repeatDelay(), yoyo(), tweenTo(), tweenFromTo(), and more.
4
GSAP … Is optimized for performance above and beyond the GPU acceleration provided by CSS Handles matrix transform seamlessly across browser vendors and versions Auto-prefixes your properties Can do things that CSS3 animations cannot. Animate along a curve Physics-based motion Animates any numeric attribute of a DOM element (independent of CSS props)
5
GSAP is not … “Bound by the limitations of the CSS spec regarding CSS transitions and CSS animation (and) doesn't rely on the adding and removing of classes to trigger a play or stop.” -Jonathan Marzullo, GreenSock Forum Moderator. @keyframes <name> { 0% {…} 50% {…} 100% {…} } transition: <animatable-property-name> <duration> <timing-function> <delay>
6
Blake Bowen (GSAP Forum Moderator)
GSAP Masters Jack Doyle (Author) Sarah Drasner (Designer, Artist, Front-end Master) codepen.io/sdras/ sarahdrasnerdesign.com/ Blake Bowen (GSAP Forum Moderator)
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.