| |
|
|
| |
EVENT DETAILS |
With the rise of mobile devices that dont support Flash, many animators have been left wondering whats next. GreenSockthe creators of the industry-standard scripted animation tools TweenLite, TweenMax, and TimelineLite for Flashhave an answer. GreenSock converted all the animation tools Flash developers have loved and depended on for years to JavaScript and the results are stunning.
The GreenSock Animation Platform (GSAP) is the only solution that allows you to dynamically create and control robust animation sequences on the widest range of screens and devices. It is a JavaScript-based API that is literally 20x faster than jQuery under stress and offers many more features. Its features and performance will not only meet the needs of the most demanding professionals, but the syntax is totally beginner-friendly.
Unlike animations built with CSS3, jQuery.animate(), Edge Animate and a number of other JS libraries, GSAP allows you to create finely tuned animations that work all the way back to IE8 (some features even work in IE6). GSAP isnt locked into DOM/CSS animation, all of its tools can be used for canvas and WebGL. Learn the API once, use it everywhere!
This class offers a comprehensive exploration of GSAP. Learn how it can bring powerful & engaging animation to all your interactive projects.
Each student will receive a free 1-year Shockingly Green Club GreenSock membership ($99 value). Shockingly Green members receive GreenSock's premium plugins and tools including: Physics2D, PhysicsProps, ScrambleText, SplitText and ThrowProps and more to come. Don't miss out on this chance to get the best training and best tools available.
This is an advanced level course, ideal for people who have a solid understanding of HTML & CSS. Knowledge of JavaScript or ActionScript is recommended. Familiarity with jQuery is helpful, though not required.
What Youll Learn
Section 1
Basic Tweening
Topics
Loading Scripts
Anatomy of a TweenLite Tween
The TweenLite.to() Method
Tweening Multiple Properties
Easing
Creating a Simple Sequence
Topics
The TweenLite.from() Method
Relative vs. Absolute Values
Pros and Cons of Sequencing with Delays
Animating 2D Transforms Scale and Rotation
Creating an Image Slider
Topics
jQuerys $(document).ready() and .click() Functions
Triggering Tweens with Buttons
Tracking Code Changes in Chromes DevTools
Using Conditional Logic to Loop a Tween
Tween Control
Topics
Using set() to create a 0-duration Tween
Introducing the transformOrigin Special Property
Controlling the Direction of Rotation
Giving a Tween a var Reference
The play() and reverse() Methods
Section 2
Tween Methods and Callbacks
Topics
Getting and Setting Tween-Related Values
Event Callbacks
Changing the timeScale() of a Tween
TweenMax
Topics
Introduction to TweenMax
Only in TweenMax: repeat, repeatDelay and yoyo
Calbacks: onStart, onRepeat and onComplete
Staggered Animation in 3D
Topics
TweenMaxs staggerFrom() Method
Using transformPerspective to Animate in 3D
Using transformOrigin in a 3D Tween
TimelineLite
Topics
Sequencing Tweens with TimelineLite
Adjusting Timing with the Position Parameter
Using Labels in a TimelineLite
Modifying an Ease with Config()
Seeking a Position Relative to a Label
Creating an Animated Progress Bar
Section 3
TimelineLite Control
Topics
Adding Play and Pause Buttons
Adding Reverse, Resume & Restart Buttons
Adding Timescale Buttons
Configuring a jQuery UI Slider
TimelineMax: Burger Boy Banner
Topics
Creating the TimelineMax & Animating the First Panel
Animating the Second Panel
Animating the Third Panel
TimelineMaxs repeat and repeatDelay
Promo: Starfield Particle Effects
Topics
Creating the Starfield Timeline Within a Function
Positioning the Stars
Using math.Random() to Enhance the Animation
Promo: SlowMo Ease
Topics
Intro to SlowMo Ease
Configuring linearRatio and power parameters
Using jQuery each() to Create Unique Tween Parameters
SlowMo yoyoMode
Section 4
Promo: Nested Timelines
Topics
Nesting Timelines within a Parent Timeline
Adding Individual Tweens to the Parent Timeline
Making Provisions for Connectivity Problems
Rocket Launch: TextPlugin
Topics
Enabling TextPlugin
Coding the Ready-Set-Go Countdown
Creating a Dramatic Animation for GO!
Rocket Launch: Special Eases
Topics
Animating the Rocket with RoughEase
Animated SpirteSheet Flames with SteppedEase
Fine-Tuning the Timing and Launching the Rocket
Board Member Biographies
Topics
Using GSAPs ScrollTo Plugin
Precise Positioning with jQuerys offset() Method
Adding Functionality to the Navigation Buttons
Tweening className with CSSPlugin
|
|
|
|
|
|
