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

Creating a simple portfolio website with WebGL and Barba.js

Creating a simple portfolio website with WebGL and Barba.jsawwwards.com

Category: JavaScript, WebGL, barba.js
Duration 3 hours 41 minutes 19 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
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024Academind Pro

Category: JavaScript, Sql, HTML, CSS, Node.js, Vue
Duration 78 hours 51 minutes 55 seconds
10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScriptudemy

Category: JavaScript, HTML, CSS
Duration 21 hours 54 minutes 19 seconds
Learn JavaScript: Full-Stack from Scratch

Learn JavaScript: Full-Stack from Scratchudemy

Category: JavaScript, MongoDB
Duration 27 hours 6 minutes 45 seconds
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projectsudemy

Category: JavaScript, HTML, CSS, Node.js, MongoDB, JQuery
Duration 22 hours 11 minutes 13 seconds
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