Treading Web Animation with GSAP

Focused View

Akshay Kashyap

2:03:06

0 View

1 - Introduction

1 -Introduction.mp4

00:40

2 -How to Setup GSAP.mp4

01:30

3 -Add GSAP to Script.js File.mp4

01:04

4 -GSAP Object.mp4

00:32

5 -What is Tween.mp4

01:29

6 -Understanding To() Tween.mp4

01:57

7 -Using Different Properties for To() Tween.mp4

01:17

8 -Multiple Elements.mp4

00:14

9 -Control GSAP Animation.mp4

02:22

10 -GSAP Easing Functions.mp4

02:31

11 -From() Tween.mp4

01:33

12 -Difference in To() and From() Tween.mp4

00:13

13 -FromTo() Tween.mp4

01:51

2 - Timeline

1 -What is Timeline.mp4

02:15

2 -Timeline Position Parameter.mp4

01:11

3 -How to Overlap the Animation.mp4

03:00

4 -OnComplete() & OnStart() Function.mp4

00:26

5 -GSAP CSS Properties.mp4

02:25

3 - Plugins

1 -What is a Plugin.mp4

01:06

2 -Understand Draggable Plugin.mp4

01:55

3 -Text Plugin.mp4

01:42

4 -ScrollTrigger Most Popular Plugin.mp4

02:35

5 -Reverse Animation.mp4

00:58

6 -Animation Viewport.mp4

02:43

7 -Debug Animations.mp4

01:22

8 -Simple Progress Bar Example.mp4

01:29

4 - Trending GSAP Project with HTML & CSS

1 -Introduction.mp4

00:45

2 -Setup Template.mp4

02:14

3 -Home Parallax Image.mp4

04:54

4 -Add Image to Style.css.mp4

01:58

5 -Make a Simple Header.mp4

02:41

6 -Style the simple Header.mp4

07:19

7 -Make the Discover Section.mp4

02:29

8 -Style Discover Section.mp4

04:59

9 -Adding GSAP Animation to Header and Discover Section.mp4

02:49

10 -GSAP X and Y Properties.mp4

03:56

11 -Solve the GSAP Problem.mp4

02:59

12 -Complete the Discover Section Animation.mp4

06:26

13 -Image Clip Section.mp4

02:07

14 -Animate Clip Image Animation.mp4

02:22

15 -Change Theme Color with Scroll.mp4

03:27

16 -Categories Section.mp4

04:11

17 -Furniture Section.mp4

03:24

18 -Make Floating Images.mp4

05:48

19 -Flying Image Animation.mp4

05:25

20 -Fixed Furniture Text.mp4

06:50

21 -OnEnter() and OnBack() Animations.mp4

03:37

22 -Finalizing All Animations.mp4

02:06

22 -Template.zip

Description

Learn trending web animations of GSAP and make Template with animation smooth

What You'll Learn?

Trending Web Animation 2025
Smooth and seamless animations
Understand what is GSAP and It's Importance
Transitions and effects
Build Complete Website template with GSAP
Make Animation Smooth

Who is this for?

This course is for all the developer intended to learn web development with latest animations.

Web Developer what to learn GSAP Animation which is trending now.

What You Need to Know?

You just need to have a basic Understanding of HTML, CSS & Javascript

More details

Description
In this course, you will learn about the latest web animation trends for 2025. These animations will last for years. You will learn all about GSP animation and template design. First, we will define gsap and its core components. Then we create a simple template and apply gsap animation to it.

GSAP (GreenSock Animation Platform) is a powerful JavaScript library that allows you to create complex web animations and effects.

GSAP enables you to create smooth and seamless animations that improve the user experience.

Advanced animation capabilities: GSAP offers advanced animation capabilities, such as easing, tweening, and morphing, which enable you to create complex animations that would be difficult or impossible to achieve with CSS alone.

Easy to use: GSAP has a simple and intuitive API that makes it easy to create animations, even for developers without extensive animation experience.

Works well with other libraries: GSAP can be used in conjunction with other popular libraries, such as React, Angular, and Vue.js, making it a versatile tool for a wide range of projects.

GSAP can be used to create smooth and engaging loading animations that keep users entertained while they wait for content to load. GSAP can be used to create complex transitions and effects, such as page transitions, modal windows, and tooltips. GSAP can be used to create interactive elements, such as buttons, menus, and sliders, that respond to user input.

GSAP animation is important because it provides a powerful and flexible way to create complex animations and effects that enhance the user experience, improve brand perception, and increase user engagement.

GSAP is a powerful JavaScript library that enables web developers to create complex and engaging animations and interactions. It offers a range of animation tools and features, such as timeline controls and easing functions, and is easy to learn and use. With GSAP, you can create interactive and engaging web pages that capture the attention of your users.

I hope you enjoy the course.

Who this course is for:
This course is for all the developer intended to learn web development with latest animations.
Web Developer what to learn GSAP Animation which is trending now.

User Reviews

Rating

average 0

Total votes0

Focused display

2D Animation

Akshay Kashyap

Instructor's Courses

This is Akshay Kashyap. I am a Website Designer and Full Stack Developer. I have 4 years of experience in website development. I love to write code and make different applications in different languages.

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.