The Ultimate JavaScript Animation Course

8h 32m 37s
English
Paid

Unlock the power of captivating animations without prior experience in animation and enhance user engagement in front-end design. Animation plays a crucial role in capturing user attention and enriching their experience. This beginner-friendly course will help you master thoughtful and strategic animations and enhance your Front End skills. While prior knowledge of HTML, CSS, and basic JavaScript is useful, it is not required.

What You'll Learn

This course provides an in-depth understanding of various animation techniques:

  • CSS Animations
  • JavaScript Animations
  • Barba JS
  • GSAP
  • SVG Animations

Projects to Build

Put theory into practice by building these six exciting projects:

  1. Pop Up Cookie: Create a humorous pop-up cookie to make a great first impression.
  2. Text Motion and Movement: Explore various text animations to craft a modern and engaging landing page.
  3. Interactive Form Animation: Elevate ordinary static forms with modern and fun animations, including input and SVG animations.
  4. SVG Micro Animations: Develop a navigational bar with SVG animations to visually indicate user interaction with buttons.
  5. Clothing Shop with Page Transitions: Ditch boring page reloads and incorporate seamless transitions using Barba JS.
  6. Ultimate Animated Website: Integrate all the skills you have acquired to create the ultimate animated website.

All projects can be freely included in your portfolio to showcase your skills.

About the Author: developedbyed.com

developedbyed.com thumbnail
Learn exciting technologies from web development, design, game development and more!

Watch Online 59 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 59 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1 Introduction to Animations
All Course Lessons (59)
#Lesson TitleDurationAccess
1
1 Introduction to Animations Demo
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
Unlock unlimited learning

Get instant access to all 58 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription