1. Intro to Micro Animations | developedbyed | Creative Programming

Autoplay
Autocomplete

Previous Lesson Complete and Continue

The Ultimate JavaScript Animation Course

Chapter One - Introduction to Animations

1 Introduction to Animations (6:06)
2. CSS Animations (9:18)
3. Simple JavaScript Animations (11:05)

Chapter Two - Pop Up Cookie Animation

Cookie Starter Files
1. Cookie Intro (1:21)
2. Setting Up Our Cookie SVG (12:42)
3. Building Our Cookie (19:12)
4. Intro to GSAP (6:12)
5. Finishing Up Our Cookie (13:30)
6. Oh, crumbs (5:45)
Cookie Finished Files

Chapter Three - Animating Text

Text Starter Files
1. Text Reveal Intro (2:03)
2.Text Animation HTML and CSS (10:21)
3. Animating The Text (9:18)
4. Split Text Animation (11:07)
Text Completed Files

Chapter Four - Micro Animations With SVGs

Micro Animations Starter Files
1. Intro to Micro Animations (1:05)
2. How To Set Up SVGs (4:55)
3. File Structure (4:36)
4. Adding The Style (5:36)
5. Home Animation (7:32)
6. Notifications Animation (10:25)
7. Messages Animation (6:23)
Micro Animations Finished

Chapter Five - Form Animation

Forms Starter Files
1. Forms Intro (1:16)
2. Setting Up The Form (3:34)
3. Form HTML (12:33)
4. Styling Form (20:26)
5. Elastic Effect (14:55)
6. Placeholder Jump (4:33)
7. Reverting Back (3:30)
8. Validation Checks (8:58)
9. Animating Checkbox (15:28)
10. Animating Our Character (8:37)
11. Animating Wave Goodbye (7:31)
12. Mobile Friendly Form (5:00)
Forms Finished Files

Chapter Six - Page Transitions

Page Transitions Starter Files
1. Intro to Page Transitions (0:57)
2. Getting Our Page Ready (13:09)
3. Styling Handbag Page (13:26)
4. Adding Our Other Pages (5:30)
5. Adding Barba JS (5:30)
6. Basic Transitions (8:24)
7. Refactoring Our Leave Animation (9:50)
8. Adding Enter Animation (4:29)
9. Fixing Weird Quirks (8:53)
10. Creating Our Product Page (10:33)
11. Product Transition (10:51)
12. Mobile Optimization (9:08)
Page Transitions Completed Files

Chapter Seven - The Ultimate Animated Website

Final Project Starter Files
1.Final Project Intro (1:44)
2. Getting Our Files Ready (3:05)
3. Front Page (18:08)
4. Smoke Page (9:20)
5. Phone Split Page (10:25)
6. Carousel Page (18:50)
7. Product Page (11:48)
8. Final Page (14:06)
9. ScrollTrigger Introduction (5:18)
10. Pinning and Animation on Scroll (8:26)
11. Split iPhones (6:21)
12. Carousel (11:01)
13. Video Scroll Animation (5:47)
14. Parallax Effect (5:04)
15. Optional - Making The Blender Animation (16:42)
Final Project Completed Files

Teach online with

1. Intro to Micro Animations

Complete and Continue

Discussion

0 comments