Motion Design for the Web | FREE COURSE

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/

Homepage

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/

Homepage

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