SuperHi FM

Search:

Catalog Cart About Sign in

INTERMEDIATECOURSE

Page Transitions

Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.

Kristen Altomare-Ciallella

Rik Lomas

Taught by

Kristen Altomare-Ciallella and Rik Lomas

Ava Sherry

Ava Sherry

Lesson 01

Welcome to the Page Transitions course

Lesson 02

Setting up ourselves for page transitions

Lesson 03

What's in our starter kit?

Canvas Magazine

Canvas Magazine

Lesson 01

Welcome to Canvas Magazine!

Lesson 02

Setting up our project

Lesson 03

The IntersectionObserver

Wanderers

Wanderers

Lesson 01

Welcome to Wanderers

Lesson 02

Setting up our project HTML

Lesson 03

Setting up Barba

Get access to Page Transitions

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructors

Kristen Altomare-Ciallella

Kristen Altomare-Ciallella

Teacher

Rik Lomas

Rik Lomas

Founder + CEO

Course structure

Chapter 01

Ava Sherry

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

Chapter 02

Canvas Magazine

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

Chapter 03

Wanderers

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

SuperHi students work at the best

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 work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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.

What you’ll learn

How to design with page transitions and animations in mind
Adding full and partial page transitions to a website design
How to add a timeline of animations between pages loading
How to cache future pages to make your site superfast
How to make sure all your code works on future page transitions
How to add animations within a page scroll

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s all!

Target Audience

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.