Modern Web Animations

سرفصل های دوره

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

1. CSS Animations & Transitions

1. Before Watching the Course

2.1 Lecture Code.html

2.2 live-server.html

2.3 NodeJS & NPM.html

2. Setting Up Our Project Folder

3.1 Lecture Code.html

3. Introduction to CSS Transitions

4.1 Lecture Code.html

4. Using CSS Transition with JavaScript

5.1 JS Random Colour.html

5.2 Lecture Code.html

5. Using JavaScript Transition Events

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

7.1 Lecture Code.html

7. Animating an Element from display none to display block

8.1 Lecture Code.html

8. Using @starting-style rule

9.1 @starting-style docs.html

9.2 Lecture Code.html

9. More on @starting-style

10.1 Lecture Code.html

10. Timing Functions Boilerplate Code

11.1 Lecture Code.html

11. Linear Timing Functions

12.1 cubic-bezier.com.html

12.2 Lecture Code.html

12. Smooth Animations with Cubic Bezier Timing Functions

13.1 Lecture Code.html

13. Animating in Jumps Using the Steps Timing Function

14.1 Animation Name Syntax.html

14.2 Starter Code.html

14. Introduction to CSS Animations

15.1 Lecture Code.html

15. CSS Animations Properties

16.1 Lecture Code.html

16. Adding Multiple Animations

17.1 Lecture Code.html

17. Animation Composition

18.1 animation-fill-mode docs.html

18.2 Lecture Code.html

18. Animation Fill Mode

19.1 @keyframes name syntax.html

19.2 Lecture Code.html

19. More on the @keyframe at-rule

20.1 Lecture Code.html

20. Animations JavaScript Events

21.1 Lecture Code.html

21. Discrete Animations

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)

23.1 Lecture Code.html

23. Animations Exercise (Part 2)

24.1 Lecture Code.html

24. Animations Exercise (Part 3)

25.1 Lecture Code.html

25. Animations Exercise (Part 4)

2. The Web Animations API

1.1 Lecture Code.html

1. When to use the Web Animations API

2.1 Web Animations API Concepts.html

2. Timeline, Animation Objects & Animation Effects

3.1 Lecture Code.html

3.2 Starter Code.html

3. Creating our First Animation Using the Web Animations API

4.1 Lecture Code.html

4. Another Way for Defining Keyframes

5. Quick Note!.html

6.1 Lecture Code.html

6. Iteration Composite

7.1 Lecture Code.html

7. Controlling Our Animation with Animation Object Methods

8.1 Lecture Code.html

8. Updating Our Animation Effect (Keyframe Effect)

9.1 Lecture Code.html

9. Getting Information About Our Animations

10.1 Lecture Code.html

10. More on the currentTime Property

11.1 Lecture Code.html

11. More on the startTime Property

12.1 Lecture Code.html

12. Animation Pending State & Ready Promise

13.1 Lecture Code.html

13. Finished Promise, Finish and Cancel Events

14.1 Lecture Code.html

14. Getting All Animations in the Document or an Element

15.1 Lecture Code.html

15.2 Starter Code.html

15. Persisting Filling Animations Styles with commitStyles

16.1 Lecture Code.html

16.2 Starter Code.html

16. Automatic Animations Removal By Browsers

17.1 Police Car Image.html

17.2 Starter Code.html

17. Web Animations API Exercise Overview

18.1 Lecture Code.html

18. Exercise Animating the Character

19.1 Lecture Code.html

19. Animating the Street, Background and Foreground

20.1 Lecture Code.html

20. Pausing the Entire Scene

21.1 Lecture Code.html

21. Speeding Up And Slowing Down Our Character

22.1 Lecture Code.html

22. Adding and Animating a Shadow to Our Character

23.1 Lecture Code.html

23. Adding a Random Car to the Scene

24.1 Lecture Code.html

24. Randomizing Our Cars Speed & Occurrence

25.1 Lecture Code.html

25. Animating the Car Wheels

3. Scroll Driven Animations

1.1 Lecture Code.html

1.2 Scroll-Driven Animations Debugger.html

1. An Overview to Scroll Based Animations

2.1 Lecture Code.html

2. Named Scroll Progress Timelines

3.1 Lecture Code.html

3. Anonymous Scroll Progress Timelines

4.1 Lecture Code.html

4. Customizing the Animation Range

5.1 Lecture Code.html

5. Timeline Scope

6.1 Lecture Code.html

6.2 Starter Code.html

6. Named View Progress Timelines

7.1 Lecture Code.html

7. View Timeline Inset

8.1 Lecture Code.html

8. Anonymous View Progress Timelines

9.1 Lecture Code.html

9. Named Timeline Ranges

10.1 Docs.html

10.2 Tool.html

10. Named Timeline Ranges Summary

11.1 Starter Code.html

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

12.1 Lecture Code.html

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

13.1 Lecture Code.html

13. Exercise Overview

14. Assets Credits.html

15.1 Lecture Code.html

15. [Exercise] Animating the SVG Logo Path

16.1 Lecture Code.html

16. [Exercise] Animating the Header Backgroud

17.1 Lecture Code.html

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

18.1 Lecture Code.html

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

19.1 Lecture Code.html

19. [Exercise] Animating the Features Section

20.1 Lecture Code.html

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

21.1 Lecture Code.html

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

22.1 Lecture Code.html

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

23.1 Lecture Code.html

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

24.1 Lecture Code.html

24.2 prefers-reduced-motion Docs.html

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

25.1 Lecture Code.html

25.2 scroll-driven-animations.style.html

25. [Exercise] Fixing Styles for Unsupported Browsers

4. View Transitions API

1.1 Lecture Code.html

1. Introduction & Demo App

2. Assets Credits.html

3.1 Crossfade Explanation.html

3.2 Lecture Code.html

3. Getting Started with the View Transitions API

4.1 Lecture Code.html

4. Customizing the Default Crossfade Animation

5.1 Lecture Code.html

5. Isolating Elements For More Control on Our Transition Animation

6.1 Lecture Code.html

6. Adding View Transition Name Dynamically

7.1 Lecture Code.html

7. ViewTransition Object Methods & Promises

8.1 Lecture Code.html

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

9.1 Lecture Code.html

9. Transforming the Thumbnail Image Into the Large Image

10.1 Lecture Code.html

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

11.1 Lecture Code.html

11.2 View Transition Class PR.html

11. Animating Grid Items with Dynamic View Transition Names

12.1 Lecture Code.html

12.2 prefers-reduced-motion Docs.html

12. Changing Transition Animations For Users Who Prefers Reduced Motion

13.1 Final Code.html

13.2 Initial Code.html

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

14. Note for the Next Lectures.html

15.1 Lecture Code.html

15. [Words Game Exercise] Introduction

16. [Words Game Exercise] Assets Credits.html

17.1 Lecture Code.html

17. [Words Game Exercise] Animating the Letters

18.1 Lecture Code.html

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

19.1 Lecture Code.html

19. [Words Game Exercise] Handling Duplicate Letters

20.1 Lecture Code.html

20. [Words Game Exercise] Animating the Modal

21.1 React Example.html

21.2 Svelte Example.html

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

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

23.1 Lecture Code.html

23. [SvelteKit Example] Introduction

24.1 Explanation.html

24.2 Lecture Code.html

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

25.1 Lecture Code.html

25. [SvelteKit] Animating the Image

26. [SvelteKit] Different Transition Animation for Mobile Screens

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy