English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 59 Lessons (8h 32m) | 2.45 GB
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
Pop Up Cookie
Build a humorous pop up cookie for a good first impression.
Text Motion and Movement
We will learn several forms of text animation to create a modern and interesting landing page.
Interactive Form Animation
Stand out from the usual static forms with this modern and fun form, includes input and svg animation.
SVG Micro Animations
We will build a nav bar and use SVG animations to show the user when they have interacted with the buttons.
Clothing Shop with Page Transitions
Say goodbye to boring page refreshes by adding seamless page transitions using Barba JS.
Ultimate Animated Website
Everything we have learnt so far put together to create the ultimate animated website.
Table of Contents
1 Introduction to Animations
2 CSS Animations
3 Simple JavaScript Animations
4 Cookie Intro
5 Setting Up Our Cookie SVG
6 Building Our Cookie
7 Intro to GSAP
8 Finishing Up Our Cookie
9 Oh, crumbs
10 Text Reveal Intro
11 Text Animation HTML and CSS
12 Animating The Text
13 Split Text Animation
14 Intro to Micro Animations
15 How To Set Up SVGs
16 File Structure
17 Adding The Style
18 Home Animation
19 Notifications Animation
20 Messages Animation
21 Forms Intro
22 Setting Up The Form
23 Form HTML
24 Styling Form
25 Elastic Effect
26 Placeholder Jump
27 Reverting Back
28 Validation Checks
29 Animating Checkbox
30 Animating Our Character
31 Animating Wave Goodbye
32 Mobile Friendly Form
33 Intro to Page Transitions
34 Getting Our Page Ready
35 Styling Handbag Page
36 Adding Our Other Pages
37 Adding Barba JS
38 Basic Transitions
39 Refactoring Our Leave Animation
40 Adding Enter Animation
41 Fixing Weird Quirks
42 Creating Our Product Page
43 Product Transition
44 Mobile Optimization
45 Final Project Intro
46 Getting Our Files Ready
47 Front Page
48 Smoke Page
49 Phone Split Page
50 Carousel Page
51 Product Page
52 Final Page
53 ScrollTrigger Introduction
54 Pinning and Animation on Scroll
55 Split iPhones
56 Carousel
57 Video Scroll Animation
58 Parallax Effect
59 Optional – Making The Blender Animation
Resolve the captcha to access the links!