Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ]

In the first lesson, I will introduce you to the structure of this course and give you a topical overview.

Complete list of GSAP library properties and methods:

https://gsap.com/docs/v3/

Web animation software.

This lesson will provide a detailed overview of options for installing the GSAP library [Install helper, gsap cdn, download gsap (zip).

Link to the installation section of the green official Greensock website:

https://gsap.com/docs/v3/Installation

Gsap object and universal access to all the functionality of the GSAP library. Comparison of gsap object and JavaScript objects. An example of the "version" property. The simplest animation with the “to ()” method.

A link to the source code of the lesson in the online editor CodePen will appear when you click on the "Resources" button.

Methods for creating web animations: physics engines, “Frame by frame sprite sheets”, “Tweening”. The concept of “Tween” in GSAP: purpose, syntax, simplest example, advantages of use.

In this lesson we will explore 3 common methods for creating “Tween”: “.to”, “.from”, “.fromTo”. Differences in the methods of setting the initial and final parameters of the animation, peculiarities of the syntax of these methods. Practical examples of using the methods. Getting familiar with the “ease” property (gsap easing). The “defaults()” method.

The term "Timeline". Timeline in GSAP: purpose, syntax, example of use. First application of "position parameter" and "yoyo". Possibilities of using short syntax.

In this lesson, we will explore the ways in which animations are positioned on the timeline that the GSAP library provides. Animated illusions to illustrate how the positioning parameters work.

Animation control methods: play (), pause (), restart (), seek (), reverse (), resume (). Purpose, example of use. Application of external plugin MotionPathPlugin.min.js. Animation “Drawing with a marker on glass”.

Purpose, syntax, features and an example of using the “set()” method. Animation “Illusion of a living surface made of rotating triangles”.

Familiarity with the stagger property. The simplest example. Interactive animation "sensitiveSurface". The syntax for the stagger property.

Interactive animation of spinning code [Preparing an Animation Object with the Canvas Element]

Interactive animation of spinning code [building animation]

Material consolidation: Staggered animations [numerical values]. Build an interactive animation using the stagger property with numerical value. Animation “Caterpillar”.

In this lesson, we will take apart configuration objects as values for the stagger property. Features of the properties for setting the configuration object: amount, each, from, grid, axis, ease. An example of animation with changing the landscape outside the window by pressing the left mouse button.

The possibilities of using functional logic for distributing the staggers. The syntax. Features of the parameters. Application example. Animation of changing the stroke - dasharray properties of the circle outline. Animation “Snail”.

This is a practical lesson in building interactive animation to reinforce the knowledge gained. Animation "Robot in space".

Possibilities of using recursive functions in animation built using the GSAP library. General information about recursion. An example of the "Ostrich and teleports" animation.

Animation of any numeric attribute of a DOM element. Features of «AttrPlugin». Animation of SVG filter attributes. Examples of controlling the dimensions of a tile pattern. An example of animating the «baseFrequency» attribute of a «Turbulence» effect filter. The same animation, using vanilla JavaScript and the «setInterval» method.

General information about the library in terms of the ability to dynamically change styles over time to get web animations. Targets of animations using CSSPlugin. Comparison on the simplest example of motion tweens using CSSPlugin and AttrPlugin. Syntax features when using CSSPlugin.

GSAP's ability to animate CSS properties with complex values. Examples of CSS properties with complex values. A detailed breakdown of the “text-shadow” CSS example. Simultaneous support for multiple shadows. Interactive animation of "GSAP" text shadow.

Capabilities of the GSAP library in terms of synchronous 2d and 3d transformations. Ability to 3D transform in SVG specification [not officially supported by specification standard]. Properties through which access to 2d and 3d transformations is made. Features properties: Perspective, transformPerspective, transformOrigin. An example illustrating these properties and the possibility of simultaneous 3D and 2D transformations.

Possibilities of use, advantages and disadvantages of using the “xPercent”, “yPercent” properties. Simplest practical example. Building an interactive animation "Eyes are watching you".

Capabilities provided by the GSAP library for rotating animation targets. Rotation clockwise, counterclockwise and rotation in the shortest direction. Features of the syntax. Determination of the point around which the rotation occurs using the local coordinate space of the element or the global coordinate space of the SVG. Properties: “transformOrigin”, “svgOrigin”, “smoothOrigin”. The simplest examples. Animation «Navigator».

CSS Filters - General Information. List of CSS filters. An example of using two filters at once. An example of animation with simultaneous use of 5 filters [interactive animation of chameleons].

An overview of the GSAP library core plugin: ModifiersPlugin. Functions modifiers. An example of building a sinusoidal path for a primitive using a modifier. Implementation options for modifiers. Using the unitize () function.

Consolidation of materials from the previous lesson. Build a complex trajectory of animation target objects using the ModifiersPlugin. Animation "A hive with bees in the forest".

General information about EndArrayPlugin: purpose, scope, animation target, syntax. The ability to use the calculated intermediate values of the numeric elements of the array. An example animation that converts one array of numeric values to another, using intermediate values to animate targets.

SnapPlugin: purpose, syntax, variability of parameters [Snap to integer values, snap to multiples, snap to an array of values, snap radius]. The simplest example. Building the animation "Galactic clock".

Find more greensock examples on the forum https://greensock.com/forums/

The Scroll Trigger plugin enables the creation of dynamic, scroll-based animations by leveraging the GSAP core. This lesson introduces the basics of implementing the Scroll Trigger plugin, from downloading and registering it, to creating simple animations. By examining both basic and advanced configuration options, the lesson prepares students to explore the extensive capabilities and customization possibilities offered by Scroll Trigger for engaging web animations.

The lesson focuses on the Toggle Actions property of the Scroll Trigger plugin, explaining its role in controlling animation behavior at four key points: starting, pausing, resuming, and resetting. It provides a detailed breakdown of the property's syntax, default values, and the flexibility it offers. Additionally, the lesson covers how to set the starting position of the Scroll Trigger and the use of markers for development and troubleshooting, laying the groundwork for exploring more complex animations.

This lesson builds on previous GSAP concepts to animate a butterfly image by splitting it into multiple canvas elements and leveraging the Scroll Trigger plugin. The project involves creating 200 horizontal strips of the image, setting up the HTML, CSS, and JavaScript for the animation, and using GSAP methods to control the movement and behavior of these strips. By manipulating properties such as duration, start and end points, and easing, the lesson demonstrates how to create complex, responsive animations that enhance user interactivity and visual appeal.

This lesson explores advanced features of the Scroll Trigger plugin, focusing on the scrub property, which synchronizes animation progress with the scroll bar. By using Boolean and numeric values, students learn to control animation smoothness and responsiveness. Through step-by-step modifications, including adding rotation and fine-tuning stagger values, the lesson demonstrates creating a complex, smooth-scrolling animation, highlighting the transformative power of JavaScript and GSAP.

Information about the composition of the bonus section

In this lesson, we will take a three-dimensional cube, which was built in the second lesson of chapter 2 using CSS properties and configure its positioning using java script tools and methods. We will bind to the keys.

In this lesson, we will continue to work with the Rubik's Cube and bind it to the mouse cursor.

In this lesson, I will explain the principles of initial CSS positioning of the faces of our 3D cube.

Constructor functions. (Part1)

Create SVG primitives. We will create arrays of objects, position them interactively, and change colors and sizes.

And i will show you incredible things!

Constructor functions. (Part2)

Building an interactive array of SVG objects. Part1 [brief overview of functions, constants and variables]

Constructor functions. (Part3)

Building an interactive array of SVG objects. Part2 [Building the initial view, Interactive snapping to the mouse cursor]

Constructor functions. (Part4)

Building an interactive array of SVG objects. Part 3 [Using color models in the project: HSLA and RGB. Conclusions]

1. The purpose of Canvas. Syntax. Basic settings.

2. object creation

3. Canvas initialization. Methods getElementById(), querySelector().

4. Access to the drawing context. Context types, getContext() method.

5. fillRect(), fillStyle methods.

6. Interactive binding to the mouse cursor.

7. HSLA color model. Fade effect

1. Canvas cleanup methods.

2. Flexible interactive binding of several animation objects to the mouse cursor.

3. Assigning hsla colors to an array of objects.

4. Building an animation engine based on requestAnimationFrame().

Using classes in web animation.

1. Purpose and structure of classes.

2. Class constructor.

3. update() method.

4. The life cycle of animation objects.

5. Animation object motion algorithm and its decomposition.

6. 'load' event

Canvas & Web Audio API [Audio Visualizer]. Part1

1. Basic html document settings for the project.

2. The 'audio' element. Purpose, use.

3. 'input' element. Purpose, use.

4. 'onchange' event

5. 'AudioContext' interface

6. The properties of the object to create the animation.

Canvas & Web Audio API [Audio Visualizer]. Part2

1. 'loadAudio()' method

2. FileReader interface

3. 'readAsDataURL()' method

4. Web Audio API: audio nodes, inputs and outputs, audio routing graph

5. audio initialization [part 1]

Canvas & Web Audio API [Audio Visualizer]. Part3

1. Audio initialization [part 2]

2. 'Uint8Array()' method

3. Building the first type of Audio Visualizer

4. The first version of the audio visualizer

Canvas & Web Audio API [Audio Visualizer]. Part4

1. Errors are related to the established connections between audio nodes and their elimination using the WeakMap object.

2. Setting up the first version of the audio visualizer.

Canvas & Web Audio API [Audio Visualizer]. Part5

1. Frequency audio test.

2. The second kind of audiovisualizer [based on the analysis of one of the set of frequencies].

3. Changes in transformation matrix.

4. Third kind of audiovisualizer.

1. Introduction.

2. Demonstration of animation configurations.

1. Basic html document settings

2. Element accepting data from user 'input'

3. Object properties

1. Main object call function.

2. Initialization method.

3. drawImage() method.

4. getImageData() method.

5. 'The canvas was corrupted by data from different sources' error and how to fix it.

6. FileReader interface, readAsDataURL() method.

1. ImageData object.

2. sRGB color space.

3. Сolor inversion.

4. 'data' property, array with pixel information [Uint8ClampedArray]

5. Formula for calculating the ordinal number of an element in an array of pixel data.

1. Building the 'Pixel' class.

2. Constructor, properties.

3. object's draw() method.

4. update() class method.

5. pixel position recalculation formula and its decomposition.

6. Changing the configuration.