Barba.js 101
Learn how to create smooth page transitions using Barba.js and vanilla JavaScript.
| Module 1 | Barba and CSS Transitions |
| Unit 1 | BJS - 01 - Introduction - 9:16 - Preview |
| Unit 2 | BJS - 02 - Barba CSS, once hook - 11:41 |
| Unit 3 | BJS - 03 - leave and enter hooks - 8:39 |
| Unit 4 | BJS - 04 - global hooks - 8:39 |
| Unit 5 | BJS - 05 - sync and clip-path transition - 10:07 |
| Unit 6 | BJS - 06 - CSS cover transition - 7:03 |
| Unit 7 | BJS - 07 - CSS slide transition - 6:12 |
| Module 2 | Barba and GSAP Transitions |
| Unit 1 | BJS - 08 - GSAP Demo Introduction - 4:25 |
| Unit 2 | BJS - 09 - GSAP Simple Tween, once, enter, leave - 9:31 |
| Unit 3 | BJS - 10 - Separate files for animations, import, export - 4:07 |
| Unit 4 | BJS - 11 - GSAP - animationEnter timeline - 12:35 |
| Unit 5 | BJS - 12 - GSAP - animationLeave timeline - 4:48 |
| Module 3 | Barba API and Plugins |
| Unit 1 | BJS - 13 - Barba Rules and Conditions - 9:01 |
| Unit 2 | BJS - 14 - Barba Rules and Conditions - P2 - 4:47 |
| Unit 3 | BJS - 15 - Barba Global Hooks - 3:24 |
| Unit 4 | BJS - 16 - Barba Views - 2:48 |
| Unit 5 | BJS - 17 - Barba Prefetch - 4:19 |
| Unit 6 | BJS - 18 - Barba Router - 7:06 |
| Unit 7 | BJS - 19 - Final Words - 1:20 |