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

JavaScript: The Advanced Concepts

JavaScript: The Advanced Conceptsudemyzerotomastery.io

Category: JavaScript
Duration 25 hours 9 minutes 23 seconds
70+ JavaScript Challenges: Data Structures & Algorithms

70+ JavaScript Challenges: Data Structures & AlgorithmsBrad Traversy

Category: JavaScript
Duration 12 hours 29 minutes 29 seconds
Learn JavaScript Closures (PRO)

Learn JavaScript Closures (PRO)codesmith.io

Category: JavaScript
Duration 5 hours 15 minutes 31 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
Testing JavaScript with Kent C. Dodds

Testing JavaScript with Kent C. DoddsKent C. Dodds

Category: JavaScript, Cypress, Other (QA)
Duration 14 hours 11 minutes 26 seconds
Build Fullstack Trello clone: WebSocket, Socket IO

Build Fullstack Trello clone: WebSocket, Socket IOudemy

Category: Angular, JavaScript, MongoDB
Duration 8 hours 49 minutes 48 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