The Ultimate JavaScript Animation Course

8h 32m 37s
English
Paid

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 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

Similar courses to The Ultimate JavaScript Animation Course

Machine Learning in JavaScript with TensorFlow.js

Machine Learning in JavaScript with TensorFlow.jsudemy

Category: JavaScript, Data processing and analysis
Duration 6 hours 42 minutes 20 seconds
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScriptudemyBrad Traversy

Category: JavaScript, HTML, CSS
Duration 18 hours 13 minutes 45 seconds
Premium Javascript (Premium membership)

Premium Javascript (Premium membership)Watch and code

Category: JavaScript
Duration 63 hours 55 minutes 37 seconds
Shaders for the Web

Shaders for the Websuperhi.com

Category: JavaScript, Three.js, OpenGL Shading Language (GLSL)
Duration 16 hours 3 minutes 4 seconds
Build Animated Physics Game with JavaScript

Build Animated Physics Game with JavaScriptudemy

Category: JavaScript
Duration 3 hours 29 minutes 27 seconds
JavaScript Basics for Beginners

JavaScript Basics for Beginnerscodewithmosh (Mosh Hamedani)

Category: JavaScript
Duration 6 hours 39 minutes 44 seconds
Learn JavaScript Closures (PRO)

Learn JavaScript Closures (PRO)codesmith.io

Category: JavaScript
Duration 5 hours 15 minutes 31 seconds
Data Structures & Algorithms - JavaScript

Data Structures & Algorithms - JavaScriptudemy

Category: JavaScript
Duration 6 hours 44 minutes
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Category: JavaScript, React.js, HTML, CSS
Duration 12 hours 13 minutes 30 seconds