The Ultimate JavaScript Animation Course

Name: The Ultimate JavaScript Animation Course
Price: 9 USD
Availability: InStock

8h 32m 37s

English

Paid

October 27, 2023

Learn how to do creative and engaging animation with no previous experience. Animation is so important in front end design as it grabs the attention of the user and provides engagement, enhancing their experience Master the skills of thoughtful and strategic animation and boost your Front End skills with this course. This is a beginner friendly course. Previous knowledge of HTML, CSS and basic JavaScript helpful.

We will learn

CSS Animations
JavaScript Animations
Barba Js
GSAP
SVG animations

We will build 6 projects

Pop Up Cookie
Build a humorous pop up cookie for a good first impression.
Text Motion and Movement
We will learn several forms of text animation to create a modern and interesting landing page.
Interactive Form Animation
Stand out from the usual static forms with this modern and fun form, includes input and svg animation.
SVG Micro Animations
We will build a nav bar and use SVG animations to show the user when they have interacted with the buttons.
Clothing Shop with Page Transitions
Say goodbye to boring page refreshes by adding seamless page transitions using Barba JS.
Ultimate Animated Website
Everything we have learnt so far put together to create the ultimate animated website.

All projects are free to be used in your portfolio.

Watch Online The Ultimate JavaScript Animation Course

Join premium to watch

Go to premium

#	Title	Duration
1	1 Introduction to Animations	06:07
2	2. CSS Animations	09:19
3	3. Simple JavaScript Animations	11:06
4	1. Cookie Intro	01:22
5	2. Setting Up Our Cookie SVG	12:43
6	3. Building Our Cookie	19:13
7	4. Intro to GSAP	06:13
8	5. Finishing Up Our Cookie	13:31
9	6. Oh, crumbs	05:46
10	1. Text Reveal Intro	02:04
11	2.Text Animation HTML and CSS	10:22
12	3. Animating The Text	09:19
13	4. Split Text Animation	11:08
14	1. Intro to Micro Animations	01:06
15	2. How To Set Up SVGs	04:56
16	3. File Structure	04:37
17	4. Adding The Style	05:37
18	5. Home Animation	07:33
19	6. Notifications Animation	10:26
20	7. Messages Animation	06:24
21	1. Forms Intro	01:17
22	2. Setting Up The Form	03:35
23	3. Form HTML	12:34
24	4. Styling Form	20:27
25	5. Elastic Effect	14:56
26	6. Placeholder Jump	04:34
27	7. Reverting Back	03:31
28	8. Validation Checks	08:59
29	9. Animating Checkbox	15:29
30	10. Animating Our Character	08:38
31	11. Animating Wave Goodbye	07:32
32	12. Mobile Friendly Form	05:01
33	1. Intro to Page Transitions	00:58
34	2. Getting Our Page Ready	13:10
35	3. Styling Handbag Page	13:27
36	4. Adding Our Other Pages	05:31
37	5. Adding Barba JS	05:31
38	6. Basic Transitions	08:25
39	7. Refactoring Our Leave Animation	09:51
40	8. Adding Enter Animation	04:30
41	9. Fixing Weird Quirks	08:54
42	10. Creating Our Product Page	10:34
43	11. Product Transition	10:52
44	12. Mobile Optimization	09:09
45	1.Final Project Intro	01:45
46	2. Getting Our Files Ready	03:06
47	3. Front Page	18:09
48	4. Smoke Page	09:21
49	5. Phone Split Page	10:26
50	6. Carousel Page	18:51
51	7. Product Page	11:49
52	8. Final Page	14:07
53	9. ScrollTrigger Introduction	05:19
54	10. Pinning and Animation on Scroll	08:27
55	11. Split iPhones	06:22
56	12. Carousel	11:02
57	13. Video Scroll Animation	05:48
58	14. Parallax Effect	05:05
59	15. Optional - Making The Blender Animation	16:43