Taught by
Kristen Altomare-Ciallella and Rik Lomas
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!
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.