Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ]

Focused View

Alexandr Tyurin

4:38:05

10 View

1. Introduction

1.1 Links.txt

1. Introduction to GSAP.mp4

07:41

2. Introduction to course structure and topical overview.mp4

06:35

3.1 C1L2.rar

3.2 Links.txt

3. installing the GSAP library.mp4

03:41

2. Basic GSAP concepts

1.1 C2L1 CodePen Link.txt

1.2 C2L1.rar

1. JavaScript object & gsap object.mp4

06:31

2.1 C2L2 CodePen Link.txt

2.2 C2L2.rar

2. Tween.mp4

06:44

3.1 C2L3 CodePen Link.txt

3.2 C2L3.rar

3. Common methods for creating a Tween.mp4

07:45

4.1 C2L4 CodePen Link.txt

4.2 C2L4.rar

4. Timeline tool.mp4

07:09

5.1 C2L5 CodePen Link.txt

5.2 C2L5.rar

5. Positioning of animations on the timeline.mp4

07:07

6.1 C2L6 CodePen Link.txt

6.2 C2L6.rar

6. Basic animation control methods.mp4

08:20

3. GSAP capabilities in depth

1.1 C3L1 CodePen Link.txt

1.2 C3L1.rar

1. set() method.mp4

07:45

2.1 C3L2a CodePen Links.txt

2.2 C3L2a.rar

2. Staggered animations [numerical values part1 lesson2a].mp4

01:55

3.1 C3L2b CodePen Links.txt

3.2 C3L2b rotatingCode.rar

3. Staggered animations [numerical values part1 lesson2b].mp4

06:15

4.1 C3L2c CodePen Links.txt

4. Staggered animations [numerical values part1 lesson2c].mp4

03:12

5.1 C3L3 CodePen Link.txt

5.2 C3L3.rar

5. Staggered animations [numerical values part2].mp4

04:00

6.1 C3L4 CodePen Link.txt

6.2 C3L4.rar

6. Staggered animations [configuration objects].mp4

07:03

7.1 C3L5 CodePen Links.txt

7.2 C3L5.rar

7. Staggered animations [functions as values].mp4

07:39

8.1 C3L6 CodePen Link.txt

8.2 C3L6.rar

8. Animation construction logic [Interactivity].mp4

07:38

9.1 C3L7 CodePen Link.txt

9.2 C3L7.rar

9. Animation construction logic [Recursion].mp4

07:04

4. GSAP core Plugins

1.1 C4L1 CodePen Links.txt

1.2 C4L1.rar

1. AttrPlugin [Animation of SVG filters].mp4

07:37

2.1 C4L2 CodePen Link.txt

2.2 C4L2.rar

2. CSSPlugin [Part 1 general information].mp4

04:57

3.1 C4L3 CodePen Link.txt

3.2 C4L3.rar

3. CSSPlugin [Part 2 Animation of complex values].mp4

05:02

4.1 C4L4 CodePen Links.txt

4.2 C4L4.rar

4. CSSPlugin [Part3 Simultaneous animation of 2d and 3d properties].mp4

06:51

5.1 C4L5 CodePen Links.txt

5.2 C4L5.rar

5. CSSPlugin [Part4 xPercent, yPercent].mp4

13:24

6.1 C4L6 CodePen Links.txt

6.2 C4L6.rar

6. CSSPlugin [Part5 Directional rotation].mp4

05:03

7.1 C4L7 CodePen Link.txt

7.2 C4L7.rar

7. CSSPlugin [Part6 Animation of CSS filters].mp4

07:00

8.1 C4L8 CodePen Link.txt

8.2 C4L8.rar

8. ModifiersPlugin.mp4

06:19

9.1 C4L9 CodePen Link.txt

9.2 C4L9.rar

9. ModifiersPlugin [Part 2].mp4

08:14

10.1 C4L10 CodePen Link.txt

10.2 C4L10.rar

10. EndArrayPlugin.mp4

04:14

11.1 C4L11 CodePen Links.txt

11.2 C4L11.rar

11. SnapPlugin.mp4

09:25

5. Bonus section

1. Information.html

2.1 C4L4.rar

2.2 C4L4+links+to+source+code+in+codepen+editor.txt

2. Interactive Web Animation. Demo lesson [part 1].mp4

04:42

3.1 C4L4b_SensitiveSurface.rar

3.2 C4L4b+links+to+source+code+in+codepen+editor.txt

3. Interactive Web Animation. Demo lesson [part 2].mp4

05:08

4. Interactive Web Animation. Demo lesson [part 3].mp4

05:48

5. Interactive Web Animation. Demo lesson [part 4].mp4

05:00

6.1 Code.txt

6. HTML Canvas element [Introduction]. Part1.mp4

06:08

7.1 Code.txt

7. HTML Canvas element [Introduction]. Part2.mp4

03:19

8.1 Code.txt

8. HTML Canvas element [Introduction]. Part3.mp4

05:48

9.1 Code.txt

9. Canvas & Web Audio API [Audio Visualizer]. Part1.mp4

05:10

10.1 Code.txt

10. Canvas & Web Audio API [Audio Visualizer]. Part2.mp4

04:13

11.1 Code.txt

11.2 Example_music.mp3

11. Canvas & Web Audio API [Audio Visualizer]. Part3.mp4

05:05

12.1 Code.txt

12. Canvas & Web Audio API [Audio Visualizer]. Part4.mp4

04:09

13.1 Code.txt

13.2 Test++20+KHz+to+20+Hz.mp3

13. Canvas & Web Audio API [Audio Visualizer]. Part5.mp4

07:00

14.1 Code.txt

14. Pixel canvas manipulation [ImageData object]. Part1.mp4

01:35

15.1 Code.txt

15. Pixel canvas manipulation [ImageData object]. Part2.mp4

03:44

16.1 Code.txt

16. Pixel canvas manipulation [ImageData object]. Part3.mp4

04:47

17.1 Code.txt

17. Pixel canvas manipulation [ImageData object]. Part4.mp4

06:57

18.1 Code.txt

18. Pixel canvas manipulation [ImageData object]. Part5.mp4

07:22

19.1 Link.txt

19. Whats next.html

Description

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

What You'll 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

Who is this for?

everyone who is interested in web animation

JavaScript developers

CSS developers

Html developers

website designer

frontend developers

UX/UI designers

for people who collect a unique library of knowledge in order to have access to it from anywhere in the world

creative people interested in learning new things

What You Need to Know?

Basic knowledge of CSS, SVG and JavaScript

Web browser - Google Chrome (all animations have been tested in this browser)

A text editor or you can work in the online CodePen editor (links to examples with code are prepared and attached to the corresponding lessons)

There are lessons where the preparation of images in a graphics editor is required for animations (images are already prepared and attached to the corresponding lessons)

Archiver for unpacking ".rar" archive with animation sources [If you choose the option of working with the code in the online editor CodePen, you will not need an archiver]

More details

Description
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
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 animation
JavaScript developers
CSS developers
Html developers
website designer
frontend developers
UX/UI designers
for people who collect a unique library of knowledge in order to have access to it from anywhere in the world
creative people interested in learning new things

User Reviews

Rating

average 0

Total votes0

Focused display

Hi )I am Alex, Software Engineer, Udemy Instructor.My specialty: "Software for automated systems in science, production and management."In my scientific activity, I had the opportunity to explore software from various angles, such as:- creating a system of metrics with which you can evaluate the quality of writing program texts;- study of programming style;- assessment of structural complexity;- creation of graph models of programs;At the beginning of my working career I researched geo-information systems. The areas of study were on the surface of the earth in urban agglomerations and the shelf of the seabed.I had a lot of work with hardware, and this greatly expanded the overall picture of what is happening in the digital world.Now I'm doing graphics. And I devote most of my time to the most spectacular part of front-end development: Web Animation.My goal is to create online courses to transfer the knowledge accumulated by humanity!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.