Summary

Keywords

motion graphics motion design after effects how to learn motion design motion design for the web web design motion design tutorial lottie animation lottie tutorial lottiefiles lottie animations css animation

Full Transcript

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: https://elements.envato.com/?utm_campaign=yt_tutsplus_vqXLGX0szIQ&utm_medium=referral&utm_source=youtube.com&utm_content=description 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 https://bit.ly/motiondesignfortheweb 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+: https://webdesign.tutsplus.com/motion-design-for-the-web-free-course--ytc-69c?utm_campaign=yt_tutsplus_vqXLGX0szIQ&utm_medium=referral&utm_source=youtube.com&utm_content=description Resources in this video: https://elements.envato.com/collections/Y3TH8UJP2L?utm_campaign=yt_tutsplus_vqXLGX0szIQ&utm_medium=referral&utm_source=youtube.com&utm_content=description Resources for video editing https://matrix.fandom.com/wiki/Trinity https://www.imdb.com/title/tt1877830/?ref_=tt_mv_close https://www.imdb.com/title/tt0439572/mediaindex/?ref_=tt_mv_close https://www.cnet.com/culture/marvel-hawkeye-disney-plus-series-release-date-hailee-steinfeld-rumor-writer-jonathan-igla/ https://www.polygon.com/2020/9/23/21430522/black-widow-delay-2021-marvel-cinematic-universe-release-dates-eternals-black-panther-doctor-strange https://edition.cnn.com/2019/09/16/europe/ruffalo-johnson-hulk-reminder-intl-scli-gbr/index.html https://ew.com/article/2016/10/14/benedict-cumberbatch-doctor-strange-costume/ Source files https://unsplash.com/photos/_5OPQ9PpLH0 https://unsplash.com/photos/qQC8tyG_JVA https://unsplash.com/photos/4hMET7vYTAQ https://unsplash.com/photos/LSFuPFE9vKE https://unsplash.com/photos/4lWIQ43CCmM https://unsplash.com/photos/HR5msYXbvtM https://unsplash.com/photos/time-lapse-photography-eH_ftJYhaTY https://lottiefiles.com/8167-simple-scroll-down-icon Reference https://handbrake.fr/ https://videojs.com/ https://lottiefiles.com/ https://www.metalab.com/ https://timelyapp.com/ https://dogstudio.co/ https://dennissnellenberg.com/ https://www.layoutstudio.design/ https://fullwhere-sz.webflow.io/ https://www.insivia.com/2023-saas-marketing-report/#explainer https://www.apple.com/imac-24/ https://www.apple.com/ios/ios-17/ https://www.invisionapp.com/ https://shakuro.com/ https://www.sketch.com/ https://slgoetz.com/ https://www.marieweber.fr/en/ https://miti-navi.com/fr https://www.vool.studio/ https://liftoffcourse.com/ https://dribbble.com/shots/5236092-Spinner-PRD https://dribbble.com/shots/2566089-Osper-loading-spinner https://dribbble.com/shots/2666261-Reuleaux-triangle-spinner https://dribbble.com/shots/2038884-Let-me-load-some-things-for-you https://dribbble.com/shots/21953371-WeStud-Creative-Log-In-For-The-Educational-Platform https://mtbriders.co.uk/ https://verholomchuk.com/ https://moxion-preprod.rejouice.io/ https://tobiasahlin.com/spinkit/ https://stripe.com/en-ro https://feedly.com/i/welcome https://embacy-io.webflow.io/ https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box https://animate.style/ https://cubic-bezier.com/ https://gsap.com/ https://lenis.studiofreight.com/ https://koox.co.uk/ https://www.firewatchgame.com/ https://climbwales.co.uk/ https://www.seher.no/annonsorinnhold/v/seher/sf/kvinnen-som-samlet-norden/11130128/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion