Motion Design for the Web | FREE COURSE

Опубликовано: 10 Октябрь 2024
на канале: Envato Tuts+

737,743

33k

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: https://elements.envato.com/?utm_camp...

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 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...

Resources in this video: https://elements.envato.com/collectio...

Resources for video editing
https://matrix.fandom.com/wiki/Trinity
https://www.imdb.com/title/tt1877830/...
https://www.imdb.com/title/tt0439572/...
https://www.cnet.com/culture/marvel-h...
https://www.polygon.com/2020/9/23/214...
https://edition.cnn.com/2019/09/16/eu...
https://ew.com/article/2016/10/14/ben...

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-laps...
https://lottiefiles.com/8167-simple-s...

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-mar...
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-Sp...
https://dribbble.com/shots/2566089-Os...
https://dribbble.com/shots/2666261-Re...
https://dribbble.com/shots/2038884-Le...
https://dribbble.com/shots/21953371-W...
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/d...
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/...
https://developer.mozilla.org/en-US/d...