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

Machine Learning in JavaScript with TensorFlow.js

Machine Learning in JavaScript with TensorFlow.js

Sources: udemy
Interested in using Machine Learning in JavaScript applications and websites? Then this course is for you! This is the tutorial you've been looking for to becom
6 hours 42 minutes 20 seconds
Youtube clone

Youtube clone

Sources: Nomad Coders
What is "clone coding"? Services that actually exist. Sweat. Sweat. Practical 100% educational method to learn while creating Clone coding is a way of learning while creating re...
15 hours 41 minutes 20 seconds
JavaScript: Understanding the Weird Parts

JavaScript: Understanding the Weird Parts

Sources: udemy, Anthony Alicea
Gain a deep understanding of JavaScript and improve debugging skills. Explore advanced concepts like prototypical inheritance and ES6 for a robust development
12 hours 10 minutes 48 seconds
Learn JavaScript Closures (PRO)

Learn JavaScript Closures (PRO)

Sources: codesmith.io
A video course on the most powerful yet complex concept in JavaScript. The goal of this course is to truly understand the concept that will enable you to accele
5 hours 15 minutes 31 seconds