Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ]

Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ], available at $64.99, has an average rating of 4.15, with 95 lectures, based on 129 reviews, and has 1020 subscribers.

You will learn about 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 This course is ideal for individuals who are everyone who is interested in web animation or JavaScript developers or CSS developers or Html developers or website designer or frontend developers or UX/UI designers or for people who collect a unique library of knowledge in order to have access to it from anywhere in the world or creative people interested in learning new things It is particularly useful for everyone who is interested in web animation or JavaScript developers or CSS developers or Html developers or website designer or frontend developers or UX/UI designers or for people who collect a unique library of knowledge in order to have access to it from anywhere in the world or creative people interested in learning new things.

Enroll now: Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ]

Summary

Title: Creative Web Animation with GSAP 3 [ JavaScript SVG CSS ]

Price: $64.99

Average Rating: 4.15

Number of Lectures: 95

Number of Published Lectures: 94

Number of Curriculum Items: 95

Number of Published Curriculum Objects: 94

Original Price: $199.99

Quality Status: approved

Status: Live

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

Who Should Attend

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

Target Audiences

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

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 built  into the core plugins as well as external plugins. 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.

Upon completion of the course, you will fully master 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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction to GSAP

Lecture 2: Introduction to course structure and topical overview

Lecture 3: installing the GSAP library

Chapter 2: Basic GSAP concepts

Lecture 1: JavaScript object & gsap object

Lecture 2: Tween

Lecture 3: Common methods for creating a Tween

Lecture 4: Timeline tool

Lecture 5: Positioning of animations on the timeline

Lecture 6: Basic animation control methods

Chapter 3: GSAP capabilities in depth

Lecture 1: set() method

Lecture 2: Staggered animations [numerical values part1: lesson2a]

Lecture 3: Staggered animations [numerical values part1: lesson2b]

Lecture 4: Staggered animations [numerical values part1: lesson2c]

Lecture 5: Staggered animations [numerical values part2]

Lecture 6: Your help is needed here!

Lecture 7: Staggered animations [configuration objects]

Lecture 8: Staggered animations [functions as values]

Lecture 9: Animation construction logic [Interactivity]

Lecture 10: Animation construction logic [Recursion]

Chapter 4: GSAP core Plugins

Lecture 1: AttrPlugin [Animation of SVG filters]

Lecture 2: CSSPlugin [Part 1: general information]

Lecture 3: CSSPlugin [Part 2: Animation of complex values]

Lecture 4: CSSPlugin [Part3: Simultaneous animation of 2d and 3d properties]

Lecture 5: CSSPlugin [Part4: xPercent, yPercent]

Lecture 6: CSSPlugin [Part5: Directional rotation]

Lecture 7: CSSPlugin [Part6: Animation of CSS filters]

Lecture 8: ModifiersPlugin

Lecture 9: ModifiersPlugin [Part 2]

Lecture 10: EndArrayPlugin

Lecture 11: SnapPlugin

Chapter 5: Extra Eases [Ease Pack]

Lecture 1: ExpoScaleEase [Part1]

Lecture 2: ExpoScaleEase [Part2]

Lecture 3: ExpoScaleEase [Part3]

Lecture 4: ExpoScaleEase [Part4]

Lecture 5: ExpoScaleEase [Part5]

Chapter 6: GSAP Extra Plugins

Lecture 1: TextPlugi [Part 1]

Lecture 2: TextPlugi [Part 2]

Lecture 3: TextPlugi [Part 3]

Lecture 4: TextPlugi [Part 4]

Lecture 5: TextPlugi [Part 5]

Lecture 6: Draggable [Part 1]

Lecture 7: Draggable [Part 2]

Lecture 8: Draggable [Part 3]

Lecture 9: Flip [Part 1]

Lecture 10: Flip [Part 2]

Lecture 11: Flip [Part 3]

Lecture 12: Flip [Part 4]

Lecture 13: Flip [Part 5]

Lecture 14: ScrollTrigger [Part1]

Lecture 15: ScrollTrigger [Part2]

Lecture 16: ScrollTrigger [Part3]

Lecture 17: ScrollTrigger [Part4]

Lecture 18: ScrollTrigger & ScrollToPlugin [Parallax] [Part1]

Lecture 19: ScrollTrigger & ScrollToPlugin [Parallax] [Part2]

Lecture 20: ScrollTrigger & ScrollToPlugin [Parallax] [Part3]

Lecture 21: ScrollTrigger & ScrollToPlugin [Parallax] [Part4]

Chapter 7: Showcase for Inspiration

Lecture 1: Page scrolling [Part1]

Lecture 2: Page scrolling [Part2]

Lecture 3: Page scrolling [Part3]

Lecture 4: Image Galleries [Part 1]

Lecture 5: Image Galleries [Part 2]

Lecture 6: Parallax [Part 1]

Lecture 7: Parallax [Part 2]

Lecture 8: A bit of Creativity [Part 1]

Lecture 9: A bit of Creativity [Part 2]

Lecture 10: A bit of Creativity [Part 3]

Chapter 8: Bonus section

Lecture 1: Information

Lecture 2: Interactive Web Animation. 3d Positioning (Part1)

Lecture 3: Interactive Web Animation. 3d Positioning (Part2)

Lecture 4: Interactive Web Animation. 3d Positioning (Part3)

Lecture 5: Interactive Web Animation. Demo lesson [part 1]

Lecture 6: Interactive Web Animation. Demo lesson [part 2]

Lecture 7: Interactive Web Animation. Demo lesson [part 3]

Lecture 8: Interactive Web Animation. Demo lesson [part 4]

Lecture 9: HTML Canvas element [Introduction]. Part1

Lecture 10: HTML Canvas element [Introduction]. Part2

Lecture 11: HTML Canvas element [Introduction]. Part3

Lecture 12: Canvas & Web Audio API [Audio Visualizer]. Part1

Lecture 13: Canvas & Web Audio API [Audio Visualizer]. Part2

Lecture 14: Canvas & Web Audio API [Audio Visualizer]. Part3

Lecture 15: Canvas & Web Audio API [Audio Visualizer]. Part4

Lecture 16: Canvas & Web Audio API [Audio Visualizer]. Part5

Lecture 17: Pixel canvas manipulation [ImageData object]. Part1

Lecture 18: Pixel canvas manipulation [ImageData object]. Part2

Lecture 19: Pixel canvas manipulation [ImageData object]. Part3

Lecture 20: Pixel canvas manipulation [ImageData object]. Part4

Lecture 21: Pixel canvas manipulation [ImageData object]. Part5

Lecture 22: Introduction to Chart.js [Part 1]

Lecture 23: Introduction to Chart.js [Part 2]

Lecture 24: Introduction to Chart.js [Part 3]

Lecture 25: Introduction to Chart.js [Part 4]

Lecture 26: Introduction to Chart.js [Part 5]

Instructors

Alexandr Tyurin
Software engineer

Rating Distribution

1 stars: 5 votes

2 stars: 4 votes

3 stars: 11 votes

4 stars: 22 votes

5 stars: 87 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!