Envato Tuts+ | Motion Design for the Web | FREE COURSE @envatotuts | Uploaded November 2023 | Updated October 2024, 1 week ago.
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 & templates with Envato Elements: elements.envato.com/?utm_campaign=yt_tutsplus_vqXLGX0szIQ&utm_medium=referral&utm_source=youtube.com&utm_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.

19 practical exercises! Download the starter kit here to follow along 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+: webdesign.tutsplus.com/motion-design-for-the-web-free-course--ytc-69c

Resources in this video: elements.envato.com/collections/Y3TH8UJP2L?utm_campaign=yt_tutsplus_vqXLGX0szIQ&utm_medium=referral&utm_source=youtube.com&utm_content=description

Resources for video editing
matrix.fandom.com/wiki/Trinity
imdb.com/title/tt1877830/?ref_=tt_mv_close
imdb.com/title/tt0439572/mediaindex/?ref_=tt_mv_close
cnet.com/culture/marvel-hawkeye-disney-plus-series-release-date-hailee-steinfeld-rumor-writer-jonathan-igla
polygon.com/2020/9/23/21430522/black-widow-delay-2021-marvel-cinematic-universe-release-dates-eternals-black-panther-doctor-strange
edition.cnn.com/2019/09/16/europe/ruffalo-johnson-hulk-reminder-intl-scli-gbr/index.html
ew.com/article/2016/10/14/benedict-cumberbatch-doctor-strange-costume

Source files
unsplash.com/photos/_5OPQ9PpLH0
unsplash.com/photos/qQC8tyG_JVA
unsplash.com/photos/4hMET7vYTAQ
unsplash.com/photos/LSFuPFE9vKE
unsplash.com/photos/4lWIQ43CCmM
unsplash.com/photos/HR5msYXbvtM
unsplash.com/photos/time-lapse-photography-eH_ftJYhaTY
lottiefiles.com/8167-simple-scroll-down-icon

Reference
https://handbrake.fr/
videojs.com
lottiefiles.com
metalab.com
timelyapp.com
dogstudio.co
dennissnellenberg.com
https://www.layoutstudio.design/
fullwhere-sz.webflow.io
insivia.com/2023-saas-marketing-report/#explainer
apple.com/imac-24
apple.com/ios/ios-17
invisionapp.com
shakuro.com
sketch.com
slgoetz.com
https://www.marieweber.fr/en/
miti-navi.com/fr
https://www.vool.studio/
liftoffcourse.com
dribbble.com/shots/5236092-Spinner-PRD
dribbble.com/shots/2566089-Osper-loading-spinner
dribbble.com/shots/2666261-Reuleaux-triangle-spinner
dribbble.com/shots/2038884-Let-me-load-some-things-for-you
dribbble.com/shots/21953371-WeStud-Creative-Log-In-For-The-Educational-Platform
mtbriders.co.uk
verholomchuk.com
moxion-preprod.rejouice.io
tobiasahlin.com/spinkit
stripe.com/en-ro
feedly.com/i/welcome
embacy-io.webflow.io
developer.mozilla.org/en-US/docs/Web/CSS/transform-box
https://animate.style/
cubic-bezier.com
gsap.com
lenis.studiofreight.com
koox.co.uk
firewatchgame.com
climbwales.co.uk
https://www.seher.no/annonsorinnhold/v/seher/sf/kvinnen-som-samlet-norden/11130128/
developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion