In this motion design tutorial, you‘ll learn how to include motion in your web design projects using video, CSS, JavaScript, GSAP, SVG, Lottie, and more. This course will help you bring your websites to life. ► Download unlimited photos, fonts & templates with Envato: [ Ссылка ]
We’ll dive into the principles of motion design, explore cutting edge tools, and we’ll learn how to apply them in practical real-world scenarios.
19 practical exercises! Download the starter kit
[ Ссылка ]
00:00:00 Welcome to this motion design course
00:03:55 The basics of motion design for the web
00:16:22 Adding videos to a web page
00:21:41 Exercise #1: Product feature with video
00:29:58 Exercise #2: Hero section with video background
00:33:52 Optimizing video for web performance
00:41:55 Introduction to CSS transitions
00:43:18 Exercise #3: Website header
00:50:50 Adding motion with CSS transitions
00:54:55 Exercise #4: Simple dropdown menu
01:05:04 Exercise #5: Image gallery
01:19:52 Exercise #6: Cool accordion
01:32:04 Introduction to CSS animations
01:35:40 Exercise #7: Simple loading screen
01:40:36 CSS animations vs. CSS transitions
01:44:20 Exploring loading animations
01:51:18 Exercise #8: Site preloader
02:02:51 Exercise #9: SVG text loader
02:17:27 Exercise #10: Button with animated loading dots
02:28:05 Animating illustrations and icons
02:31:42 Exercise #11: Animated Lottie icon
02:37:14 Exercise #12: Animated menu icon
02:46:01 Exercise #13: Animated illustration
03:09:14 Exercise #14: Animated avatars
03:19:20 Creating accent animations
03:25:35 Exercise #15: Animated logo
03:40:43 Exercise #16: Typewriter effect
03:59:00 Playing around with interactive animations
04:05:48 Exercise #17: Mouse follow effect
04:24:05 Exercise #18: Scroll-triggered animation
04:44:39 Adding depth and dimension with parallax
04:49:26 Exercise #19: Parallax animation
05:07:03 Motion and responsive web design
05:17:16 Thanks and goodbye!
► Read more on Envato Tuts+: [ Ссылка ]
Resources in this video: [ Ссылка ]
Resources for video editing
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
Source files
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
Reference
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
Motion Design for the Web | FREE COURSE
Теги
motion graphicsmotion designafter effectshow to learn motion designmotion design for the webweb designmotion design tutoriallottie animationlottie tutoriallottiefileslottie animationscss animationcss animationscss animations tutorialcss tutorialcss animation tutorialcsscss animation effectscss animation examplescss transitionscss transitions tutorialcss transitions propertiescss transition
