Would you like to learn how to create advanced interactive web animations?
Right now, you can familiarize yourself with the structure of this course and the topical overview in the first lesson available for free preview: "Introduction to course structure and topical overview".
I also recommend that you familiarize yourself with several interesting interactive animations of this course in the online editor CodePen. Links can be found in the description of lesson 2 [Installing the library] section 1 [Introduction].
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. Lessons start with theoretical information and end with practical examples that reinforce new knowledge.
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.
To work with the code, you can choose 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 this course, you will have experience in creating advanced web animations using the GSAP library.