INFO:

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. Whether you’re just starting out or you’re looking to level up your skills, this course will help you bring your websites to life. ► Download unlimited photos, fonts u0026 templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_vqXLGX0szIQu0026utm_medium=referralu0026utm_source=youtube.comu0026utm_content=description Together, 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. This course features 19 practical exercises! If you want to follow along, you can download the starter kit here: 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! Download the resources used in this video: https://elements.envato.com/collections/Y3TH8UJP2L?utm_campaign=yt_tutsplus_vqXLGX0szIQu0026utm_medium=referralu0026utm_source=youtube.comu0026utm_content=description Resources used 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 For 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