Learn the Core of Greensock Animation Platform [ GSAP ]. Building creative web animations using JavaScript SVG & CSS | Discount Coupon for Udemy Course
Last updated 2/2023Course Language EnglishCourse Caption English, Arabic, 14 moreCourse Length 03:59:29 to be exact 14369 seconds!Number of Lectures 40
This course includes:
4 hours hours of on-demand video
2 article
Full lifetime access
Access on mobile and TV
Certificate of completion
61 additional resources
Basic concepts [Gsap object, Tween, common methods for it creating, Timeline tool, Position parameters, Basic animation control methods, Easing]
Animation methods and properties of the GSAP core [purpose, syntax, application features, examples of using]
This course contains 24 unique animation projects which illustrate the features of the properties and methods included in the core of the GSAP library
Do you want to learn how to build creative web animations? Perhaps you are already familiar with GSAP animation and want to deepen and expand this knowledge? Are you looking for interesting animation effects and optical illusions?You have chosen the right course!In this course, you will learn a very powerful tool for creating web animations: the GreenSock Animation Platform (GSAP). You will get acquainted with the latest version of the web animation tool: GSAP 3. Today it is the most robust, high-performance JavaScript animation library on the planet! This tutorial uses the classic academic teaching model. At the beginning of the lessons, theoretical information is presented, followed by practical web animation examples that consolidate new knowledge. The aim of this course is to show the completeness and variety of animation techniques using GSAP.This course is structured sequentially: from simple to complex. At the very beginning, the basic concepts are studied and the simplest animations are built, then a dive into the available properties and methods of the GSAP library follows, and more complex animations are built. And finally, towards the end of the course, there is an acquaintance with the plugins built into the core of the library. In the final part, the most interesting and complex web animations will be built. The structure of the graphic design of the course:in the upper right part - the title of the chapter [Example: “GSAP capabilities in depth”];in the upper left part - the number of the lesson in the current chapter [Example: “Lesson 1”];in the upper middle part - the name of the lesson or the next topic of the current lesson [Example: “CSSPlugin (Part3: Simultaneous animation of 2d and 3d properties)”];on the right side of the screen - a board with theoretical information;on the left side of the screen - Visual studio code editor with examples illustrating the theoryat the bottom of the screen - additional auxiliary information [Example: “smoothOrigin: true”].All lessons in this course are available for viewing in 1080p quality [view lessons in maximum quality whenever possible.]In this course, you will find many interesting javascript animation examples with code. You can work and experiment on your own by choosing one of two options Get a link to the code of the current lesson in the online CodePen editor (for this you need to click the “Resources” button corresponding to the lesson you are currently studying, download the file with the link [example file: “C2L1 CodePen Link.txt”], open it in a text editor and follow the link).Download the archive [example: “C1L2.rar”]. Unpack to disk. Open files in a text editor [“Visual Studio Code” can become a convenient editor, or any of your choice]. Connect the library according to the “Lecture 2” [“Installing the library”] instruction in the “Introduction” chapter.Subtitles have been prepared for the course in the following languages: English, Arabic, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Russian, Spanish, Swedish, Traditional Chinese, Turkish, Vietnamese.Upon completion of the course, you will fully master the core of the GSAP 3 library. And you will be able to create any web animations that your imagination will allow you.SEO part:Are you looking to build creative web animations or expand your knowledge of the GreenSock Animation Platform [GSAP]? If so, you're in the right place! In this course, you'll learn how to use the latest version of GSAP 3 – the most robust and high-performance JavaScript animation library on the planet.The course is designed using a classic academic teaching model, with theoretical information presented at the beginning of each lesson, followed by practical web animation examples to consolidate new knowledge. Our goal is to show you the completeness and variety of animation techniques using GSAP.The course is structured sequentially, starting with the basics and gradually progressing to more complex animations, with an introduction to the plugins built into the core of the library towards the end. The graphic design of the course includes the title of the chapter, the lesson number, the name of the lesson or the next topic, theoretical information on the right, a Visual Studio code editor on the left with examples illustrating the theory, and additional auxiliary information at the bottom.This course offers 1080p quality lessons with subtitles available in English, Arabic, Finnish, French, German, Hindi, Indonesian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Russian, Spanish, Swedish, Traditional Chinese, Turkish, and Vietnamese.You'll find many interesting JavaScript animation examples with code, and you can experiment on your own by choosing one of two options. First, you can get a link to the code of the current lesson in the online CodePen editor. Second, you can download the archive and unpack it to your disk. Open the files in a text editor and connect the library according to the instruction in the "Introduction" chapter.Upon completion of the course, you'll fully master the core of the GSAP 3 library and be able to create any web animations that your imagination allows.Enroll now and start building stunning web animations using JavaScript, SVG, and CSS with the GreenSock Animation Platform.Who this course is for:everyone who is interested in web animationJavaScript developersCSS developersHtml developerswebsite designerfrontend developersUX/UI designersfor people who collect a unique library of knowledge in order to have access to it from anywhere in the worldcreative people interested in learning new things
Course Content:
Sections are minimized for better readability, click the section title to view the course content
3 Lectures | 17:58
Introduction to GSAP
07:41
Content:
- 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
06:35
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://greensock.com/docs/
installing the GSAP library
03:42
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:
greensock.com/docs/Installation
6 Lectures | 43:36
JavaScript object & gsap object
06:31
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.
Tween
06:44
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
07:45
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.
Timeline tool
07:09
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
07:07
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
08:20
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
set() method
07:45
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]
04:00
Material consolidation: Staggered animations [numerical values]. Build an interactive animation using the stagger property with numerical value. Animation “Caterpillar”.
Staggered animations [configuration objects]
07:03
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]
07:39
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]
07:38
This is a practical lesson in building interactive animation to reinforce the knowledge gained. Animation "Robot in space".
Animation construction logic [Recursion]
07:04
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]
07:37
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.
CSSPlugin [Part 1: general information]
04:57
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]
05:02
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]
06:51
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]
13:24
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]
05:03
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]
07:00
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].
ModifiersPlugin
06:19
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]
08:14
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".
EndArrayPlugin
04:14
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
09:25
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
00:27
Information about the composition of the bonus section
Interactive Web Animation. Demo lesson [part 1]
04:42
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]
05:08
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]
05:48
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]
05:00
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]
05:10
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]
04:13
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]
05:05
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]
04:09
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]
07:00
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.
What's next?
00:36
4.33
(83 course ratings)
1
0/83
2
4/83
3
9/83
4
13/83
5
58/83
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
If you like to get inspired by great web projects, you should check out Made with Javascript. If you have a project that you wish to share with the world, feel free to submit your project on Made with Javascript Club website.
Free Online Tools And Converters for your use
URL Encoder
Input a string of text or a URL and encode the entered string
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.