Advanced Web Animations with GSAP [ JavaScript SVG CSS ]

Learn the Core of Greensock Animation Platform [ GSAP ]. Building advanced web animations using JavaScript SVG & CSS

In this course, you will learn in-depth knowledge of the methods and properties of the GreenSock GSAP library core. The course also includes information about the plugins built into the core.

What you’ll learn

  • Basic concepts of the GSAP library [Gsap object, Tween & common methods for it creating, Timeline tool, Position parameters, Basic animation control methods].
  • Animation methods and properties of the GSAP core [purpose, syntax, application features, examples of using].
  • GSAP core plugins [AttrPlugin, CSSPlugin, ModifiersPlugin, EndArrayPlugin, SnapPlugin].
  • This course contains 24 unique animation projects which illustrate the features of the properties and methods included in the core of the GSAP library.

Course Content

  • Introduction –> 2 lectures • 6min.
  • Basic GSAP concepts –> 6 lectures • 44min.
  • GSAP capabilities in depth –> 7 lectures • 47min.
  • GSAP core Plugins –> 11 lectures • 1hr 18min.
  • Bonus section –> 1 lecture • 6min.

Advanced Web Animations with GSAP [ JavaScript SVG CSS ]

Requirements

  • This course is not for beginners. Basic knowledge of CSS, SVG and JavaScript is required.
  • Any computer and OS will work — Windows, macOS or Linux.
  • Internet connection.
  • Web browser – Google Chrome (all animations have been tested in this browser).
  • A text editor that you already have is suitable as a code editor.
  • There are lessons where the preparation of images in a graphics editor is required for animations (images are already prepared and attached to the corresponding lessons).
  • Archiver for unpacking “.rar” archive with animation sources.
  • There is no need for any paid software – the core of the GSAP library is completely free.

In this course, you will learn in-depth knowledge of the methods and properties of the GreenSock GSAP library core. The course also includes information about the plugins built into the core.

At the beginning of each lesson, theoretical information about the studied material is presented, then practical examples follow to consolidate new knowledge.

All animations presented in the course are attached to the corresponding lessons in the archives.

 

CURRICULUM:

1. Introduction

– Promotional video for the course

– Installing the library

 

2. Basic GSAP concepts

– JavaScript object & gsap object

– Tween

– Common methods for creating a Tween

– Timeline tool

– Position parameter

– Basic animation control methods

– set() method

 

3. GSAP capabilities in depth

– set() method

– Staggered animations [numerical values part1]

– Staggered animations [numerical values part2]

– Staggered animations [configuration objects]

– Staggered animations [functions as values]

– Animation construction logic [Interactivity]

– Animation construction logic [Recursion]

 

4. GSAP core Plugins

– AttrPlugin [Animation of SVG filters]

– CSSPlugin [Part 1: general information]

– CSSPlugin [Part 2: Animation of complex values]

– CSSPlugin [Part3: Simultaneous animation of 2d and 3d properties]

– CSSPlugin [Part4: xPercent, yPercent]

– CSSPlugin [Part5: Directional rotation]

– CSSPlugin [Part6: Animation of CSS filters]

– ModifiersPlugin

– ModifiersPlugin [Part 2]

– EndArrayPlugin

– SnapPlugin

5. Bonus section

– Bonus lesson

 

Teaching methodology of this course:

-> Study topic ->

-> theoretical overview of the method ->

-> setting a specific task ->

-> implementation ->

-> Conclusions