In this motion style tutorial you'll discover how to include motion in your web design projects utilizing video, CSS, JavaScript, GSAP, SVG, Lottie and all kinds of other methods. Whether you're simply beginning, or you're looking to level up your skills, this course will assist you bring your websites to life.

Together, we'll dive into the principles of movement style, explore cutting edge tools, and we'll learn how to apply them in useful real-world circumstances.

This course includes 19 practical exercises! If you wish to follow along, you can download the starter set here:

00:00:00 Welcome to this movement style course
00:03:55 The essentials of motion style for the web
00:16:22 Adding videos to a websites
00:21:41 Exercise # 1: Item function with video
00:29:58 Exercise # 2: Hero area with video background
00:33:52 Enhancing video for web performance
00:41:55 Intro to CSS shifts
00:43:18 Exercise # 3: Website header
00:50:50 Adding movement with CSS shifts
00:54:55 Workout # 4: Simple dropdown menu
01:05:04 Exercise # 5: Image gallery
01:19:52 Workout # 6: Cool accordion
01:32:04 Introduction to CSS animations
01:35:40 Exercise # 7: Basic loading screen
01:40:36 CSS animations vs. CSS shifts
01:44:20 Exploring loading animations
01:51:18 Workout # 8: Website preloader
02:02:51 Workout # 9: SVG text loader
02:17:27 Workout # 10: Button with animated filling dots
02:28:05 Stimulating illustrations and icons
02:31:42 Exercise # 11: Animated Lottie icon
02:37:14 Exercise # 12: Animated menu icon
02:46:01 Workout # 13: Animated illustration
03:09:14 Workout # 14: Animated avatars
03:19:20 Producing accent animations
03:25:35 Exercise # 15: Animated logo design
03:40:43 Workout # 16: Typewriter effect
03:59:00 Playing around with interactive animations
04:05:48 Workout # 17: Mouse follow effect
04:24:05 Exercise # 18: Scroll-triggered animation
04:44:39 Including depth and dimension with parallax
04:49:26 Workout # 19: Parallax animation
05:07:03 Movement and responsive web design
05:17:16 Thanks and goodbye!

Download the resources used in this video:

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+.
Discover totally free how-to tutorials and online courses. Design a logo design, produce a website, construct an app, or learn a brand-new skill:.

Envato Aspects.
All the innovative assets you require under one subscription. Customize your project by including distinct images, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements:.

► Subscribe to Envato Tuts+ on YouTube:.
► Follow Envato Tuts+ on Twitter:.
► Follow Envato on Facebook:.

CSS Best Sellers