The Ultimate JavaScript Animation Course Information

The Ultimate JavaScript Animation Course by Edwin Simo is a comprehensive course designed to teach you how to create engaging and creative animations using JavaScript, CSS, SVG, and various animation libraries.

Build 6 awesome projects to master animation and upgrade your Front End skills.

Learn To Create Awesome JavaScript Animations!

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.

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.

What You’ll Learn In The Ultimate JavaScript Animation Course?

Chapter One – Introduction to Animations

• 1 Introduction to Animations (6:06)
• 2. CSS Animations (9:18)
• 3. Simple JavaScript Animations (11:05)

Chapter Two – Pop Up Cookie Animation

• Cookie Starter Files
• 1. Cookie Intro (1:21)
• 2. Setting Up Our Cookie SVG (12:42)
• 3. Building Our Cookie (19:12)
• 4. Intro to GSAP (6:12)
• 5. Finishing Up Our Cookie (13:30)
• 6. Oh, crumbs (5:45)
• Cookie Finished Files

Chapter Three – Animating Text

• Text Starter Files
• 1. Text Reveal Intro (2:03)
• 2.Text Animation HTML and CSS (10:21)
• 3. Animating The Text (9:18)
• 4. Split Text Animation (11:07)
• Text Completed Files

Chapter Four – Micro Animations With SVGs

• Micro Animations Starter Files
• 1. Intro to Micro Animations (1:05)
• 2. How To Set Up SVGs (4:55)
• 3. File Structure (4:36)
• 4. Adding The Style (5:36)
• 5. Home Animation (7:32)
• 6. Notifications Animation (10:25)
• 7. Messages Animation (6:23)
• Micro Animations Finished

Chapter Five – Form Animation

• Forms Starter Files
• 1. Forms Intro (1:16)
• 2. Setting Up The Form (3:34)
• 3. Form HTML (12:33)
• 4. Styling Form (20:26)
• 5. Elastic Effect (14:55)
• 6. Placeholder Jump (4:33)
• 7. Reverting Back (3:30)
• 8. Validation Checks (8:58)
• 9. Animating Checkbox (15:28)
• 10. Animating Our Character (8:37)
• 11. Animating Wave Goodbye (7:31)
• 12. Mobile Friendly Form (5:00)
• Forms Finished Files

Chapter Six – Page Transitions

• Page Transitions Starter Files
• 1. Intro to Page Transitions (0:57)
• 2. Getting Our Page Ready (13:09)
• 3. Styling Handbag Page (13:26)
• 4. Adding Our Other Pages (5:30)
• 5. Adding Barba JS (5:30)
• 6. Basic Transitions (8:24)
• 7. Refactoring Our Leave Animation (9:50)
• 8. Adding Enter Animation (4:29)
• 9. Fixing Weird Quirks (8:53)
• 10. Creating Our Product Page (10:33)
• 11. Product Transition (10:51)
• 12. Mobile Optimization (9:08)
• Page Transitions Completed Files

Chapter Seven – The Ultimate Animated Website

• Final Project Starter Files
• 1.Final Project Intro (1:44)
• 2. Getting Our Files Ready (3:05)
• 3. Front Page (18:08)
• 4. Smoke Page (9:20)
• 5. Phone Split Page (10:25)
• 6. Carousel Page (18:50)
• 7. Product Page (11:48)
• 8. Final Page (14:06)
• 9. ScrollTrigger Introduction (5:18)
• 10. Pinning and Animation on Scroll (8:26)
• 11. Split iPhones (6:21)
• 12. Carousel (11:01)
• 13. Video Scroll Animation (5:47)
• 14. Parallax Effect (5:04)
• 15. Optional – Making The Blender Animation (16:42)
• Final Project Completed Files

More courses from the same author: Edwin Simo

Salepage: The Ultimate JavaScript Animation Course – Edwin Simo

When will I receive my course?

You will receive a link to download your course immediately or within 1 to 21 days. It depends on the product you buy, so please read the short description of the product carefully before making a purchase.

How is my course delivered?

We share courses through Google Drive, so once your order is complete, you'll receive an invitation to view the course in your email.

To avoid any delay in delivery, please provide a Google mail and enter your email address correctly in the Checkout Page.

In case you submit a wrong email address, please contact us to resend the course to the correct email.

How do I check status of my order?

Please log in to iDesignCourse account then go to Order Page. You will find all your orders includes number, date, status and total price.

If the status is Processing: Your course is being uploaded. Please be patient and wait for us to complete your order. If your order has multiple courses and one of them has not been updated with the download link, the status of the order is also Processing.

If the status is Completed: Your course is ready for immediate download. Click "VIEW" to view details and download the course.

Where can I find my course?

Once your order is complete, a link to download the course will automatically be sent to your email.

You can also get the download link by logging into your iDesignCourse account then going to Downloads Page.