Do you want to learn how to add page transitions to your project?

Learn how to use Barba.js to create custom CSS and GreenSock transitions.

Table of Content

HD videos uncovering the basics of Barba.js!

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
Signup Now!

Free forever, Instant Access

Have a few questions? No worries.

Can I download the videos and watch them offline?

No, video files are not available for downloads. You need to be online and logged in to my site to be able to follow this course.

What software do I need to complete the workshop?

All you need is a code editor (I am using VSCode). You can download the starting files and follow me step-by-step from start to finish of each project.

Why should I learn Barba.js?

Page transitions can add another layer of polish and uniqueness to your website. Learning Barba.js will help you to create your own custom page transitions from scratch.

I have another question!

For any other questions use the Get In Touch form or hit me up on Twitter @ihatetomatoes.

Do you want to master page transitions?

Here is what others think
about the Barba.js 101.

5 stars
By Robbie Crenshaw

If your like me Barba can be really confusing at times.

Once again Petr has done an exceptional job explaining the different parts of Barba and how they all function.

Like always Petr’s videos make me feel like I’m getting the one-on-one attention I need in order for me to really learn something new.

I highly recommend Barba.js 101 for anyone wanting to learn Barba!

5 stars
By Brent Morton

I really enjoyed this course, and highly recommend it if your wanting to spice up your website.

Petr gives some great examples and explanations on this very cool page transition library.

When your finished you will have the skills to make all your pages come to life!

5 stars
By Ben van Looy

Waw, Petr is such a great teacher, I’ve seen many step-by-step tutorials & lessons but these videos are far out the best.

In his pragmatic manner, it’s so easy to apply the things he teaches to many other real-live situations.

Thanks for the lessons & all the inspiration!


Made by Petr Tichy
Now that you are at the bottom of the page, why not to do some clicking instead of scrolling and reading?