INTERMEDIATECOURSE
Page Transitions
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
Taught by
Kristen Altomare-Ciallella and Rik Lomas
Taught by
Kristen Altomare-Ciallella and Rik Lomas
This go-at-your-own-pace course has 4 hours of video lessons that will teach you how to create beautiful, smooth page transitions on your websites using CSS and Javascript.
In this course, SuperHi has designed and produced a series of projects covering how to make websites go from disconnected page navigation to seamless, animated transitions as your users click and interact around your web designs.
You will learn how to integrate the Barba Javascript library into your websites which will then allow you to add CSS and other Javascript techniques to add smooth, harmonious effects to your design work.
A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s all!
From graphic designers looking to bring movement to their creations to developers aiming to add a bit of pizzazz to their site interactions, this course is for anyone who wants to learn how to add seamless interstitial page transitions.
This is an intermediate course when it comes to page transitions, though we would recommend basic knowledge of HTML, CSS, and a bit of Javascript before starting. If you don’t have this just yet, trying our Learn To Code Now book, or taking either our Foundation HTML, CSS + JS course or our Javascript for Designers course will help you feel as prepared as possible.
In our first project, we'll talk about how to think about page transitions, how to add Barba to our project and what is the differences between transitions and views?
In Canvas Magazine, we add in more complex page transitions using GSAP timelines and add in more Javascript plugins such as imagesLoaded. We also talk about how to make your current JS code work with Barba.
In our final project, we take what we've learned from the previous projects and apply it to full-page, wipe effect transitions based on whether we click previous or next.
Kristen is a Toronto-based senior visual designer at Glitch, a site for making websites from scratch. She previously worked for as a visual designer for SuperHi, Nike and Huge.
Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.
Lesson 01
Welcome to the Page Transitions course
Lesson 02
Setting up ourselves for page transitions
Lesson 03
What's in our starter kit?
Lesson 04
Adding Barba.js to our project
Lesson 05
Setting up our HTML for Barba.js
Lesson 06
Setting up our Javascript for Barba.js
Lesson 07
Setting up Barba's CSS
Lesson 08
Adding nicer page transitions to our project
Lesson 09
Barba's beforeEnter hook
Lesson 10
Correcting our navigation links
Lesson 11
Changing the body tag with Barba's views
Lesson 12
Adding Barba's 'once' and adding CSS animations
Lesson 01
Welcome to Canvas Magazine!
Lesson 02
Setting up our project
Lesson 03
The IntersectionObserver
Lesson 04
Image display using the same IntersectionObserver
Lesson 05
Setting up Barba's HTML
Lesson 06
Initializing Barba.js
Lesson 07
Testing with Barba's CSS module
Lesson 08
Making sure our code works between pages
Lesson 09
Javascript Promises in hooks
Lesson 10
GSAP Timelines
Lesson 11
Adding current and next transitions with GSAP
Lesson 12
Adding a once transition
Lesson 13
Adding a product view and namespace
Lesson 14
Adding imagesLoaded to our loading
Lesson 01
Welcome to Wanderers
Lesson 02
Setting up our project HTML
Lesson 03
Setting up Barba
Lesson 04
Fading in our navigation
Lesson 05
Adding a photos fade and movement
Lesson 06
Adding a wiper effect
Lesson 07
Adding an image to our interstitial
Lesson 08
Adding text transitions
Lesson 09
Changing the text with data attributes
Lesson 10
Adding in multiple transitions
Lesson 11
Barba Prefetch
Lesson 12
Thanks for joining our course
Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?
View student workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
