Главная
Study mode:
on
1
Welcome to this motion design course
2
The basics of motion design for the web
3
Adding videos to a web page
4
Exercise #1: Product feature with video
5
Exercise #2: Hero section with video background
6
Optimizing video for web performance
7
Introduction to CSS transitions
8
Exercise #3: Website header
9
Adding motion with CSS transitions
10
Exercise #4: Simple dropdown menu
11
Exercise #5: Image gallery
12
Exercise #6: Cool accordion
13
Introduction to CSS animations
14
Exercise #7: Simple loading screen
15
CSS animations vs. CSS transitions
16
Exploring loading animations
17
Exercise #8: Site preloader
18
Exercise #9: SVG text loader
19
Exercise #10: Button with animated loading dots
20
Animating illustrations and icons
21
Exercise #11: Animated Lottie icon
22
Exercise #12: Animated menu icon
23
Exercise #13: Animated illustration
24
Exercise #14: Animated avatars
25
Creating accent animations
26
Exercise #15: Animated logo
27
Exercise #16: Typewriter effect
28
Playing around with interactive animations
29
Exercise #17: Mouse follow effect
30
Exercise #18: Scroll-triggered animation
31
Adding depth and dimension with parallax
32
Exercise #19: Parallax animation
33
Motion and responsive web design
34
Thanks and goodbye!
Description:
Dive into a comprehensive 5-hour course on motion design for web projects, covering techniques using video, CSS, JavaScript, GSAP, SVG, and Lottie. Learn the principles of motion design and explore cutting-edge tools through 19 practical exercises. Master adding videos to web pages, optimizing for performance, creating CSS transitions and animations, animating illustrations and icons, implementing interactive animations, and incorporating parallax effects. Gain hands-on experience with product features, hero sections, dropdowns, image galleries, accordions, loading screens, animated logos, typewriter effects, and responsive design considerations. Download the provided starter kit to follow along and elevate your web design skills by bringing your websites to life with captivating motion.

Motion Design for the Web

Envato Tuts+
Add to list
0:00 / 0:00