Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ]

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

4.80 (122 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ]
931
students
5.5 hours
content
Apr 2024
last update
$64.99
regular price

What you will learn

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]

GSAP core plugins [AttrPlugin, CSSPlugin, ModifiersPlugin, EndArrayPlugin, SnapPlugin]

This course contains unique animation projects which illustrate the features of the properties and methods included in the core of the GSAP library

Why take this course?

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 theory

  • at 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

  1. 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).

  2. 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.

Screenshots

Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Screenshot_01Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Screenshot_02Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Screenshot_03Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Screenshot_04

Reviews

Reza
August 2, 2022
I really enjoyed this course because the content is advanced. The teacher is a very good programmer and that shows in his code. Please make other advanced courses, showing more interesting ways to use JScript and GSAP.
Mitch
May 6, 2022
Charming and friendly presenter, and covered some really good topics. Some parts have some quite dense mathematics in it, which could possibly be explained a little more. Really impressed either way.
Kira
March 21, 2022
Previously, I used only CSS and SVG animation in my work. It turned out that GSAP significantly expands my opportunities. The course is perfect for getting to know the GSAP library.
Eddie
January 18, 2022
Firstly, I can see the author is a real pro and has a high level of knowledge. The examples are great and shows a lot of techniques and interesting. The first few chapters are aimed at more beginners. As an experienced developer, I did not find the first few chapters too useful, bit too basic. Also felt a bit disappointed that some bits which did interest me, especially about the maths of the animations, tended to be glossed over. It requires me to try to self study those more difficult things. Would be been better if the author explained those things a bit better. However, the final chapter and the bonus chapter were useful and explained well. Still well recommended course.
Leonardo
December 29, 2021
Suitable for those who want to get acquainted with the functionality of GSAP. Step by step from the basics to the finer points. I liked the material. The library is interesting and powerful.
Kris
December 24, 2021
Very detailed about the structure of the library. The course is suitable for those who need detailed knowledge of GSAP. I did not know that it gives such opportunities. Web animation is the most entertaining component of web content. It is addictive, I want more. It remains to envy those who pass it for the first time. I would recommend to the author something else like Three.js, WebGL, D3js in the same format.
Stefan
December 21, 2021
The course contains some interesting demos, however, we are in 2021 and we are using powerful front-end libraries such as React.js or Angular.js, mainly for production. These demos have no real-life usage/application and are created ONLY with html, css, vanilla js, and CDN imports. I very much prefer to pay for the course and raise awareness to others who decide to purchase. Thanks.
Matilda
November 22, 2021
A very rare learning style. It can be seen that everything is thought out and worked out in advance. Only useful information, without further ado. Big work!
Anastasia
November 12, 2021
Lots of mathematical magic but not as many real world applications for websites as I was hoping. Plenty of great content though!
Liana
November 2, 2021
The course considers the latest version of GSAP. The library is powerful, there are many examples where a small amount of code results in very interesting animations. The instructions are detailed. Thoughtful design. Humor. This course is suitable both for first acquaintance and learning from scratch, and for those who have already worked with GSAP
Sara
September 14, 2021
Cool course. Dynamic, humorous. Examples of animations in codepen are very handy. The eyes from the last chapter were my favorite.
Edgar
August 24, 2021
Great stuff... I need to create a bunch of simpler animations and got ton of info on how to do it, .. other parts of the course I won't need right away, but it opens the door to have a reference to create other sort of animations.. I think I am ready to jump in gsap and create some disruption on the web....
Karina
August 12, 2021
Great course! I liked the thoughtful design and structure of the lessons. Capacious theory and interesting practical examples. All these illusions, interactive animations and of course the eyes! The humor lifted the spirits. And all these things with the code in the editor - it arrives, appears, highlights, stands out, turns over, dissolves, I wonder how much time was spent on this?

Charts

Price

Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Price chart

Rating

Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Ratings chart

Enrollment distribution

Creative Web Animation with GSAP 3  [ JavaScript SVG CSS ] - Distribution chart
4227192
udemy ID
8/7/2021
course created date
8/10/2021
course indexed date
Bot
course submited by