Motion Design for the Web | FREE COURSE

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

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!

Resources for video editing

Source files

Reference

[VikkiArichwal]

After completing 50 minutes on this video, I am having a feeling that a university professor is teaching. Smooth, point to point and informative.

[CyberPhaseII]

bro dropped all these for free? love you man!

[PaschalAOgba]

For a long time now, I've been searching for a rich tutorial like this. Thank you so much.

[lucaxxsss]

literally one of the best free courses in youtube, it gives you a lot of notion of UI/UX design, despite of paid elements, it's a VERY GOOD COURSE, recommend every one that studying for design or even trying to improve web design skills to watch this

[AstorSkywalker]

Being a database programmer I'm having such a great time adding art to a web page. Definitely making my job more enjoyable. ❤🎉😊

[AgreeWithKT]

I found his transitions between different statements of the tut to be smooth, he is animated at times and lastly captures them in these beautifully organized videos! He is the 'Holy Trinity'!!!

[gambomaster]

Adi Purdila is one of my favorite teachers on the web. I have been learning from him for years and still don't get bored. Thank you Adi. Your voice and style of teaching makes me very comfortable when it comes to grasping and learning new things. 🙏

[NeoMekhar]

This course is one of the best ive seen in a long while, hands down. Thanks a ton!!

[iamtharunraj]

Adi is an excellent teacher. I have seen some of his tutorials on this channel. I love his way of teaching!

[malindusakuntha]

Excellent Teacher For Me Sir. Thanks For Sharing Your Knowledge

[uajoku]

This course is so compelling. I was fixated to it till the end although I am new to this stuffs and just learning. The presenter is such a cool, calm and totally awesome teacher. I will look out for more stuff from him. Thank you so much.

[RealDevDash]

I learned so much in the first hour, this being free is amazing and website optimization tips is such a plus

[kiandraplummer]

Love that this is so expansive into web design and animation, can't wait to dive in

[Logan-nzjk]

Thank you so much for making this course, not to mention it being free. ❤

[maerosss]

Holy crappy guacamole! At first I thought it's just whole recorded stream, ain't nobody got time for that .... and ooooh it really is a full, structured, quality course.
Thank you so much, great job!!!

[offlain]

Great course! BTW on exercise 9, we can simply add the 'dot' class to the 2nd <text> element inside the <svg>. So that the dot is purple and appears slowly instead of using the same animation as the Graphix text.

[brickstv]

a course I did not know I needed but glad I'm here for it.

[janbass]

This is one of the best tutorials I've ever seen. THANK YOU!!

[Harsh-snrc]

I can’t thank you enough for this course. It’s been an incredible journey, and I’ve learned so much from both the course and your guidance! May both sides of your pillows forever stay cool.

[guchfun]

Thank you for sharing such a nuanced and richly detailed course that explains real world applications for CSS and JS animation! Very unique!