The Ultimate JavaScript Animation Course

8h 32m 37s
English
Paid

Course description

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.

Read more about the course

We will learn

  • CSS Animations
  • JavaScript Animations
  • Barba Js
  • GSAP
  • SVG animations

We will build 6 projects

  1. Pop Up Cookie
    Build a humorous pop up cookie for a good first impression.
  2. Text Motion and Movement
    We will learn several forms of text animation to create a modern and interesting landing page.
  3. Interactive Form Animation
    Stand out from the usual static forms with this modern and fun form, includes input and svg animation.
  4. SVG Micro Animations
    We will build a nav bar and use SVG animations to show the user when they have interacted with the buttons.
  5. Clothing Shop with Page Transitions
    Say goodbye to boring page refreshes by adding seamless page transitions using Barba JS.
  6. 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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Object-oriented Programming in JavaScript

Object-oriented Programming in JavaScript

Sources: codewithmosh (Mosh Hamedani), udemy
Object-oriented programming (OOP) is a popular programming paradigm or style of programming. It’s been around since ‘70s, but unlike tools and frameworks that c
3 hours 53 minutes 46 seconds
JavaScript Basics for Beginners

JavaScript Basics for Beginners

Sources: codewithmosh (Mosh Hamedani)
JavaScript is one of the most popular programming languages in the world. Companies like Walmart, Netflix, and PayPal run big internal applications around JavaS
6 hours 39 minutes 44 seconds
Creating a simple portfolio website with WebGL and Barba.js

Creating a simple portfolio website with WebGL and Barba.js

Sources: awwwards.com
Nothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with s
3 hours 41 minutes 19 seconds