English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 45m | 313 MB
If you’re building animations for the web, odds are good you’re at least a little familiar with GreenSock. The Greensock JavaScript animation library provides a wide variety of tools and controls for creating animation on the web. While CSS animations allow you to make simple transformations and toggle the state of UI elements in an application, with JavaScript you can create complex animations and advanced effects, control the timing of animations, and control when animations occur. In this course, Christina Gorton gets you started with JavaScript animations, showing you how to work with SVGs, animate them with GreenSock, and create a portfolio page complete with JavaScript animations on scroll.
Table of Contents
Introduction
1 Why JavaScript animations
2 The GreenSock Animation library
1. SVG Basics for Animation
3 SVG shapes, paths, and commands
4 Properly group an SVG for animation
5 Export and Optimize an SVG
6 Challenge Group and export an SVG for animation
7 Solution Group and export an SVG for animation
2. GreenSock Syntax
8 Tween a DOM element with the gsap.method()
9 Use the gsap.set() method
10 Stagger animations with GreenSock
11 Control multiple tweens with gsap.timeline()
12 Adding defaults to clean up timeline animations
13 Change an animation with built-in eases
14 Challenge Animate the Hero SVG
15 Solution Animate the Hero SVG
3. Use the ScrollTrigger Plugin
16 Adding GreenSock plugins to your project
17 Select a trigger for a scroll animation
18 Control your animation with the start and end parameters
19 Add markers to debug your scroll animation
20 Scrub animations in view
21 Challenge Add ScrollTrigger animation to the About section
22 Solution Add ScrollTrigger animation to the About section
4. Create Complex Animations with a Main Timeline
23 Create reusable functions for flexibility
24 Set up a main timeline animation
25 Positioning animations in a timeline
Conclusion
26 What else can GreenSock do
Resolve the captcha to access the links!