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

Watch Online The Ultimate JavaScript Animation Course

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

50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Sources: udemy, Brad Traversy
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HT...
18 hours 13 minutes 45 seconds
Asynchronous JavaScript

Asynchronous JavaScript

Sources: udemy
Understanding the asynchronous nature of Javascript is key to mastering the language. This course is designed to take someone with a beginner level knowledge
4 hours 38 minutes 53 seconds
Explore the JavaScript Universe (Explore the JavaScript Universe)

Explore the JavaScript Universe (Explore the JavaScript Universe)

Sources: Dan Abramov
On a good day, programming feels like magic. You patiently enchant the machine with a tapestry of digital spells. With a few confident keystrokes, you breathe l
Build Incredible Chatbots

Build Incredible Chatbots

Sources: udemy
Welcome to the most comprehensive and complete chatbot developer course. Learn concepts, tools and techniques that you will need
7 hours 51 minutes
SAAS Adventure - Learn to Create your own SAAS

SAAS Adventure - Learn to Create your own SAAS

Sources: saasadventure.io
In this 21-day program you will learn you how to create your very own SAAS application!
8 hours 37 minutes 3 seconds