Modern Web Animations

Focused View

Ali Alaa

14:31:30

591 View

1. CSS Animations & Transitions

1. Before Watching the Course.mp4

02:34

2.1 Lecture Code.html

2.2 live-server.html

2.3 NodeJS & NPM.html

2. Setting Up Our Project Folder.mp4

06:15

3.1 Lecture Code.html

3. Introduction to CSS Transitions.mp4

11:22

4.1 Lecture Code.html

4. Using CSS Transition with JavaScript.mp4

06:44

5.1 JS Random Colour.html

5.2 Lecture Code.html

5. Using JavaScript Transition Events.mp4

08:58

6.1 Animatable and not animatable CSS properties.html

6.2 Lecture Code.html

6.3 mdn Web Docs Animatable CSS properties.html

6. Transition Behavior & Discrete Animations.mp4

08:09

7.1 Lecture Code.html

7. Animating an Element from display none to display block.mp4

06:08

8.1 Lecture Code.html

8. Using @starting-style rule.mp4

08:17

9.1 @starting-style docs.html

9.2 Lecture Code.html

9. More on @starting-style.mp4

05:54

10.1 Lecture Code.html

10. Timing Functions Boilerplate Code.mp4

05:04

11.1 Lecture Code.html

11. Linear Timing Functions.mp4

18:02

12.1 cubic-bezier.com.html

12.2 Lecture Code.html

12. Smooth Animations with Cubic Bezier Timing Functions.mp4

07:49

13.1 Lecture Code.html

13. Animating in Jumps Using the Steps Timing Function.mp4

20:31

14.1 Animation Name Syntax.html

14.2 Starter Code.html

14. Introduction to CSS Animations.mp4

05:49

15.1 Lecture Code.html

15. CSS Animations Properties.mp4

07:24

16.1 Lecture Code.html

16. Adding Multiple Animations.mp4

06:07

17.1 Lecture Code.html

17. Animation Composition.mp4

19:15

18.1 animation-fill-mode docs.html

18.2 Lecture Code.html

18. Animation Fill Mode.mp4

09:30

19.1 @keyframes name syntax.html

19.2 Lecture Code.html

19. More on the @keyframe at-rule.mp4

08:57

20.1 Lecture Code.html

20. Animations JavaScript Events.mp4

04:48

21.1 Lecture Code.html

21. Discrete Animations.mp4

09:22

22.1 Character Image.html

22.2 Clouds Image.html

22.3 Lecture Code.html

22.4 Street Signs Image.html

22. Animations Exercise (Part 1).mp4

07:11

23.1 Lecture Code.html

23. Animations Exercise (Part 2).mp4

10:21

24.1 Lecture Code.html

24. Animations Exercise (Part 3).mp4

09:47

25.1 Lecture Code.html

25. Animations Exercise (Part 4).mp4

07:18

2. The Web Animations API

1.1 Lecture Code.html

1. When to use the Web Animations API.mp4

06:29

2.1 Web Animations API Concepts.html

2. Timeline, Animation Objects & Animation Effects.mp4

06:36

3.1 Lecture Code.html

3.2 Starter Code.html

3. Creating our First Animation Using the Web Animations API.mp4

15:32

4.1 Lecture Code.html

4. Another Way for Defining Keyframes.mp4

10:23

5. Quick Note!.html

6.1 Lecture Code.html

6. Iteration Composite.mp4

05:13

7.1 Lecture Code.html

7. Controlling Our Animation with Animation Object Methods.mp4

10:14

8.1 Lecture Code.html

8. Updating Our Animation Effect (Keyframe Effect).mp4

09:31

9.1 Lecture Code.html

9. Getting Information About Our Animations.mp4

11:50

10.1 Lecture Code.html

10. More on the currentTime Property.mp4

08:30

11.1 Lecture Code.html

11. More on the startTime Property.mp4

07:08

12.1 Lecture Code.html

12. Animation Pending State & Ready Promise.mp4

11:22

13.1 Lecture Code.html

13. Finished Promise, Finish and Cancel Events.mp4

03:59

14.1 Lecture Code.html

14. Getting All Animations in the Document or an Element.mp4

10:04

15.1 Lecture Code.html

15.2 Starter Code.html

15. Persisting Filling Animations Styles with commitStyles.mp4

07:26

16.1 Lecture Code.html

16.2 Starter Code.html

16. Automatic Animations Removal By Browsers.mp4

10:27

17.1 Police Car Image.html

17.2 Starter Code.html

17. Web Animations API Exercise Overview.mp4

02:19

18.1 Lecture Code.html

18. Exercise Animating the Character.mp4

13:17

19.1 Lecture Code.html

19. Animating the Street, Background and Foreground.mp4

05:37

20.1 Lecture Code.html

20. Pausing the Entire Scene.mp4

03:36

21.1 Lecture Code.html

21. Speeding Up And Slowing Down Our Character.mp4

05:01

22.1 Lecture Code.html

22. Adding and Animating a Shadow to Our Character.mp4

05:18

23.1 Lecture Code.html

23. Adding a Random Car to the Scene.mp4

09:43

24.1 Lecture Code.html

24. Randomizing Our Cars Speed & Occurrence.mp4

09:19

25.1 Lecture Code.html

25. Animating the Car Wheels.mp4

05:10

3. Scroll Driven Animations

1.1 Lecture Code.html

1.2 Scroll-Driven Animations Debugger.html

1. An Overview to Scroll Based Animations.mp4

06:35

2.1 Lecture Code.html

2. Named Scroll Progress Timelines.mp4

11:06

3.1 Lecture Code.html

3. Anonymous Scroll Progress Timelines.mp4

07:00

4.1 Lecture Code.html

4. Customizing the Animation Range.mp4

05:08

5.1 Lecture Code.html

5. Timeline Scope.mp4

08:32

6.1 Lecture Code.html

6.2 Starter Code.html

6. Named View Progress Timelines.mp4

11:07

7.1 Lecture Code.html

7. View Timeline Inset.mp4

09:46

8.1 Lecture Code.html

8. Anonymous View Progress Timelines.mp4

04:23

9.1 Lecture Code.html

9. Named Timeline Ranges.mp4

16:52

10.1 Docs.html

10.2 Tool.html

10. Named Timeline Ranges Summary.mp4

07:11

11.1 Starter Code.html

11. Creating Scroll Progress Timelines using the Web Animations JS API.mp4

08:48

12.1 Lecture Code.html

12. Creating View Progress Timelines using the Web Animations JS API.mp4

12:27

13.1 Lecture Code.html

13. Exercise Overview.mp4

05:51

14. Assets Credits.html

15.1 Lecture Code.html

15. [Exercise] Animating the SVG Logo Path.mp4

11:08

16.1 Lecture Code.html

16. [Exercise] Animating the Header Backgroud.mp4

07:18

17.1 Lecture Code.html

17. [Exercise] Animating the Hero Section (Part 1).mp4

16:05

18.1 Lecture Code.html

18. [Exercise] Animating the Hero Section (Part 2).mp4

07:26

19.1 Lecture Code.html

19. [Exercise] Animating the Features Section.mp4

18:25

20.1 Lecture Code.html

20. [Exercise] Animating the Team Members Section (Part 1).mp4

18:05

21.1 Lecture Code.html

21. [Exercise] Animating the Team Members Section (Part 2).mp4

04:46

22.1 Lecture Code.html

22. [Exercise] Animating the Services Section (Part 1).mp4

14:34

23.1 Lecture Code.html

23. [Exercise] Animating the Services Section (Part 2).mp4

16:00

24.1 Lecture Code.html

24.2 prefers-reduced-motion Docs.html

24. [Exercise] Turning off the Animations According to the User Preference.mp4

09:23

25.1 Lecture Code.html

25.2 scroll-driven-animations.style.html

25. [Exercise] Fixing Styles for Unsupported Browsers.mp4

05:57

4. View Transitions API

1.1 Lecture Code.html

1. Introduction & Demo App.mp4

06:49

2. Assets Credits.html

3.1 Crossfade Explanation.html

3.2 Lecture Code.html

3. Getting Started with the View Transitions API.mp4

11:01

4.1 Lecture Code.html

4. Customizing the Default Crossfade Animation.mp4

06:25

5.1 Lecture Code.html

5. Isolating Elements For More Control on Our Transition Animation.mp4

10:12

6.1 Lecture Code.html

6. Adding View Transition Name Dynamically.mp4

11:30

7.1 Lecture Code.html

7. ViewTransition Object Methods & Promises.mp4

09:46

8.1 Lecture Code.html

8. Using View Transition Promises to Scroll an Item Into View.mp4

04:58

9.1 Lecture Code.html

9. Transforming the Thumbnail Image Into the Large Image.mp4

12:55

10.1 Lecture Code.html

10. Transforming the Thumbnail Image Into the Large Image (Cont.).mp4

06:26

11.1 Lecture Code.html

11.2 View Transition Class PR.html

11. Animating Grid Items with Dynamic View Transition Names.mp4

09:37

12.1 Lecture Code.html

12.2 prefers-reduced-motion Docs.html

12. Changing Transition Animations For Users Who Prefers Reduced Motion.mp4

02:55

13.1 Final Code.html

13.2 Initial Code.html

13. Animating the View Transitions Pseudo Elements with the Web Animations API.mp4

17:14

14. Note for the Next Lectures.html

15.1 Lecture Code.html

15. [Words Game Exercise] Introduction.mp4

13:48

16. [Words Game Exercise] Assets Credits.html

17.1 Lecture Code.html

17. [Words Game Exercise] Animating the Letters.mp4

11:16

18.1 Lecture Code.html

18. [Words Game Exercise] Animating the lives & coins.mp4

13:31

19.1 Lecture Code.html

19. [Words Game Exercise] Handling Duplicate Letters.mp4

17:42

20.1 Lecture Code.html

20. [Words Game Exercise] Animating the Modal.mp4

05:42

21.1 React Example.html

21.2 Svelte Example.html

21. Using View Transitions with JS Frameworks [ReactJS & Svelte Example].mp4

09:13

22.1 Astro.html

22.2 NextJS Issue.html

22.3 Nuxt.html

22.4 Remix.html

22.5 SvelteKit.html

22. Using View Transitions with Single Page Applications.mp4

03:15

23.1 Lecture Code.html

23. [SvelteKit Example] Introduction.mp4

05:45

24.1 Explanation.html

24.2 Lecture Code.html

24. [SvelteKit] Using onNavigate to Initialize a View Transition Between Routes.mp4

08:52

25.1 Lecture Code.html

25. [SvelteKit] Animating the Image.mp4

04:43

26. [SvelteKit] Different Transition Animation for Mobile Screens.mp4

08:22

Description

Deep Dive into Animations and Transitions, The Web Animations API, Scroll Driven Animations and The View Transitions API

What You'll Learn?

Learn about CSS Animations & Transitions.
Learn about the new JavaScript Web Animations API.
Discover scroll driven animations in details.
Create impressive page transitions with the View Transitions API.

Who is this for?

Web developers looking to learn everything about animating in the browser.

Web developers looking to learn about new animation APIs like the Web Animations API, scroll driven animations & the View Transitions API.

What You Need to Know?

Some basic HTML, CSS & JavaScript Knowledge is required.

More details

Description
Welcome to Modern Web Animations, a deep dive into modern animation techniques with no libraries, only browser APIs.

CSS Animations & Transitions have been around for a long time now. But recently new APIs were introduced to modern browsers to further improve animating on the web and give developers more control.

Among these new additions is the Web Animations API (WAAPI). The Web Animations API unlocks the power of the browser's animation engine for developers. It allows us to construct animations and control their playback with JavaScript. It is one of the most performant ways to animate on the Web.

In addition to that, new features were added to CSS Animations that allow us to control animations as users scroll. By adding new properties like animation-timeline, scroll-timeline and view-timeline, we can now have animations that are not based on time but based on scrolling progress or based on the visibility of a certain element in the viewport. This opens the door to creating impressive scroll driven animations without having to load any external libraries.

Another recent addition to modern browsers is the introduction of the View Transitions API. This API allows us to easily create animated transitions between different DOM states. It can be especially useful in Single Page Applications (SPAs) when we need to have an animation when navigating between different routes. Before the View Transitions API these kinds of animations were extremely complicated to achieve.

In this course we are going to cover all of these topics in great detail. And not only that, but we are also going to have a section on old CSS Animations & Transitions and discuss every aspect of them in depth. We are also going to have practical examples and exercises for every topic discussed.

So join now if you want to bring your websites to life!
Who this course is for:
Web developers looking to learn everything about animating in the browser.
Web developers looking to learn about new animation APIs like the Web Animations API, scroll driven animations & the View Transitions API.

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

Ali Alaa

Instructor's Courses

Hey there! I am Ali Alaa, a front-end web developer. Years ago I discovered my interest in web development, especially the front-end side. I started exploring the field from HTML/CSS/JS to WordPress theming and JS frameworks. I have been working as a front-end developer for more than 8 years. After all these years, I decided to start creating on udemy and share my knowledge with you.

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.