Bella
A collection of GSAP3 and ScrollTrigger demos based on an award winning website.
| Module 1 | Intro, navigation and header. |
| Unit 1 | PGB - 01 - Course Introduction - 5:46 - Preview |
| Unit 2 | PGB - 02 - Navigation Links - 8:00 |
| Unit 3 | PGB - 03 - Navigation toggleClass - 3:48 |
| Unit 4 | PGB - 04 - Navigation Away - 10:48 |
| Unit 5 | PGB - 05 - Padding bottom hack - 7:00 |
| Unit 6 | PGB - 06 - Mouse move event - 7:03 |
| Unit 7 | PGB - 07 - Header left images - 11:14 |
| Unit 8 | PGB - 08 - Header completed - 1:53 |
| Module 2 | Reveal Gallery |
| Unit 1 | PGB - 09 - Reveal Gallery Overview - 7:08 |
| Unit 2 | PGB - 10 - Reset image position - 6:15 |
| Unit 3 | PGB - 11 - Reveal Image - 7:14 |
| Unit 4 | PGB - 12 - Center Text - 8:42 |
| Unit 5 | PGB - 13 - Reveal Text - 10:05 |
| Unit 6 | PGB - 14 - Media Queries in JS - 9:20 |
| Unit 7 | PGB - 15 - Remove Event Listeners, killTweensOf - 9:53 |
| Module 3 | Portfolio |
| Unit 1 | PGB - 16 - Portfolio Overview - 7:04 - Preview |
| Unit 2 | PGB - 17 - Portfolio mouse enter - 10:36 |
| Unit 3 | PGB - 18 - Portfolio mouse leave - 3:41 |
| Unit 4 | PGB - 19 - Portfolio mouse move - 9:40 |
| Module 4 | Parallax Images and Fixed Navigation |
| Unit 1 | PGB - 20 - Parallax Images Overview - 4:35 |
| Unit 2 | PGB - 21 - Parallax ScrollTrigger - 8:50 |
| Unit 3 | PGB - 22 - Pin Navigation - 6:06 |
| Unit 4 | PGB - 23 - Highlight active item - 9:57 |
| Unit 5 | PGB - 24 - Update CSS custom property - 7:01 |
| Module 5 | Smooth Scrolling |
| Unit 1 | PGB - 25 - Scroll-jacking - 9:07 - Preview |
| Unit 2 | PGB - 26 - Smooth Scrolling Overview - 2:42 |
| Unit 3 | PGB - 27 - ScrollTo Section - 5:34 |
| Unit 4 | PGB - 28 - Smooth Scrolling with GSAP Part I - 10:27 |
| Unit 5 | PGB - 29 - Smooth Scrolling with GSAP Part II - 10:08 |
| Unit 6 | PGB - 30 - Smooth ScrollBar Setup - 3:07 |
| Unit 7 | PGB - 31 - Smooth ScrollBar - 12:58 |
| Module 6 | Loading Animation |
| Unit 1 | PGB - 32 - Loading Animation Overview - 7:20 |
| Unit 2 | PGB - 33 - Loading Animation In - 11:00 |
| Unit 3 | PGB - 34 - Loading Animation Out - 11:43 |
| Unit 4 | PGB - 35 - Optimizing Loader - 6:16 |
| Unit 5 | PGB - 36 - Loading Progress Bar - 8:55 |
| Unit 6 | PGB - 37 - Images Loaded - 12:33 |
| Module 7 | Page Transitions |
| Unit 1 | PGB - 38 - Setup Barba.js - 11:11 |
| Unit 2 | PGB - 39 - How to use VSCode Debugger - 5:43 |
| Unit 3 | PGB - 40 - Page Transition Timeline Part I - 9:03 |
| Unit 4 | PGB - 41 - Page Transition Timeline Part II - 6:05 |
| Unit 5 | PGB - 42 - Animate Barba.js Containers - 7:25 |
| Module 8 | Final Overview |
| Unit 1 | Final Integration & Overview |
| Unit 2 | Launch Bonuses |