This course contains 24 unique animation projects which illustrate the features of the properties and methods included in the core of the GSAP library
Sections are minimized for better readability, click the section title to view the course content
3 Lectures | 17:58
Introduction to GSAP
- historical background;
- information about the structure of the GSAP library;
- examples of animations;
- most beautiful sites created using greensock technologies from experienced developers
Introduction to course structure and topical overview
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:
installing the GSAP library
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:
6 Lectures | 43:36
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.
Common methods for creating a Tween
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.
Positioning of animations on the timeline
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.
Basic animation control methods
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”.
9 Lectures | 52:30
Purpose, syntax, features and an example of using the “set()” method. Animation “Illusion of a living surface made of rotating triangles”.
Interactive animation of spinning code [building animation]
Staggered animations [numerical values part2]
Material consolidation: Staggered animations [numerical values]. Build an interactive animation using the stagger property with numerical value. Animation “Caterpillar”.
Staggered animations [configuration objects]
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.
Staggered animations [functions as values]
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”.
Animation construction logic [Interactivity]
This is a practical lesson in building interactive animation to reinforce the knowledge gained. Animation "Robot in space".
Animation construction logic [Recursion]
Possibilities of using recursive functions in animation built using the GSAP library. General information about recursion. An example of the "Ostrich and teleports" animation.
11 Lectures | 01:18:06
AttrPlugin [Animation of SVG filters]
CSSPlugin [Part 1: general information]
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.
CSSPlugin [Part 2: Animation of complex values]
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.
CSSPlugin [Part3: Simultaneous animation of 2d and 3d properties]
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.
CSSPlugin [Part4: xPercent, yPercent]
Possibilities of use, advantages and disadvantages of using the “xPercent”, “yPercent” properties. Simplest practical example. Building an interactive animation "Eyes are watching you".
CSSPlugin [Part5: Directional rotation]
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».
CSSPlugin [Part6: Animation of CSS filters]
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.
ModifiersPlugin [Part 2]
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/
11 Lectures | 47:18
Information about the composition of the bonus section
Interactive Web Animation. Demo lesson [part 1]
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!
Interactive Web Animation. Demo lesson [part 2]
Constructor functions. (Part2)
Building an interactive array of SVG objects. Part1 [brief overview of functions, constants and variables]
Interactive Web Animation. Demo lesson [part 3]
Constructor functions. (Part3)
Building an interactive array of SVG objects. Part2 [Building the initial view, Interactive snapping to the mouse cursor]
Interactive Web Animation. Demo lesson [part 4]
Constructor functions. (Part4)
Building an interactive array of SVG objects. Part 3 [Using color models in the project: HSLA and RGB. Conclusions]
Advanced Web Animation with Canvas. Demo lesson [part 1]
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.
Advanced Web Animation with Canvas. Demo lesson [part 2]
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]
Advanced Web Animation with Canvas. Demo lesson [part 3]
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
Advanced Web Animation with Canvas. Demo lesson [part 4]
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.
Advanced Web Animation with Canvas. Demo lesson [part 5]
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.
(83 course ratings)
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
FAQ: Udemy Free course Most frequent questions and answers
Does Udemy offer Free Udemy coupons?
Yes, Udemy is the largest online education platform, with the broadest selection of video-on-demand courses and qualified instructors available to meet your needs. At theprogrammingbuddy.club we curate the latest udemy coupons, their expiry, and the number of uses left of these udemy coupons.
How to get free Udemy courses?
There are two ways to get free Udemy courses:
Go to udemy.com and search for your desired course category. Then select free from the filter options.
You can also get paid courses for free if you have a coupon. You can head to theprogrammingbuddy.club, where you can get a daily udemy paid course for free.
How to get Udemy Certificates for free?
Udemy offers certification on completion of each course. In order to receive a certificate of completion from Udemy, you need to complete your course 100%. There is a simple hack, you can open a video and jump on the timeline to complete a lecture.
To download the certificate from Udemy, you need to head over to your account on a desktop browser. Udemy certificates can't be accessed on the mobile app.
Do Udemy courses expire?
No, once you enroll, you will have lifetime access to the course. You can complete the course on your schedule.
Why are the Udemy instructors giving away free Udemy Coupons?
Every instructor has worked for hours on each of their courses. As new courses get launched, the instructors have no way to get their course in front of an audience to get some feedback. So, instructors share free coupons for their courses to get feedback from the students. We attheprogrammingbuddy.club work with these instructors to get their courses available to our buddies.
Is Udemy safe to use?
Yes, payments on Udemy are safe. It is no different than paying for other services on an application or website and inputting your payment information before receiving your goods. Just be sure to keep your account secure, do not share your udemy accounts.
Can Udemy courses get you a job?
Earning a skill is more valuable than earning a job these days. Skills are your most valuable asset. They can help you qualify for jobs you want and get promoted to more advanced positions within your organization. Unfortunately, it is difficult for many people to balance taking courses with work and family obligations. We have had many students, who have taken just Udemy courses, started a job as well as started freelancing with the skills they have learned.