Learning JavaScript Animations with GreenSock

Focused View

Christina Gorton

1:45:49

375 View

[1] Introduction

[1] Why JavaScript animations.mp4

01:10

[2] The GreenSock Animation library.mp4

02:25

[2] 1. SVG Basics for Animation

[1] SVG shapes, paths, and commands.mp4

04:00

[2] Properly group an SVG for animation.mp4

03:48

[3] Export and Optimize an SVG.mp4

04:17

[4] Challenge Group and export an SVG for animation.mp4

01:18

[5] Solution Group and export an SVG for animation.mp4

07:33

[3] 2. GreenSock Syntax

[1] Tween a DOM element with the gsap.method().mp4

06:17

[2] Use the gsap.set() method.mp4

05:15

[3] Stagger animations with GreenSock.mp4

05:53

[4] Control multiple tweens with gsap.timeline().mp4

07:54

[5] Adding defaults to clean up timeline animations.mp4

04:17

[6] Change an animation with built-in eases.mp4

03:40

[7] Challenge Animate the Hero SVG.mp4

02:34

[8] Solution Animate the Hero SVG.mp4

04:12

[4] 3. Use the ScrollTrigger Plugin

[1] Adding GreenSock plugins to your project.mp4

02:09

[2] Select a trigger for a scroll animation.mp4

04:55

[3] Control your animation with the start and end parameters.mp4

03:09

[4] Add markers to debug your scroll animation.mp4

03:37

[5] Scrub animations in view.mp4

02:15

[6] Challenge Add ScrollTrigger animation to the About section.mp4

01:41

[7] Solution Add ScrollTrigger animation to the About section.mp4

03:45

[5] 4. Create Complex Animations with a Main Timeline

[1] Create reusable functions for flexibility.mp4

06:41

[2] Set up a main timeline animation.mp4

06:01

[3] Positioning animations in a timeline.mp4

06:08

[6] Conclusion

[1] What else can GreenSock do.mp4

00:55

Description

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.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Christina Gorton

Instructor's Courses

Amazon Web Services (AWS) is one of the most dynamic and fastest growing businesses of Amazon. Since 2006, AWS has provided companies of all sizes with cloud technology products & solutions and access to a global computing infrastructure that is the backbone of Amazon’s multi-billion dollar retail business. Today, AWS powers hundreds of thousands of businesses in 190 countries around the world. Come build the future of cloud computing with us: https://www.amazon.jobs/en/landing_pages/AWS-Worldwide-Specialist-Organization

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.