Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
Page Transitions
4h 10m 33s
English
Paid
This go-at-your-own-pace course has 3 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.
- 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
About the Author: SuperHi
SuperHi was a creative technology online school founded in 2016 by Rik Lomas, focused on bringing design-school production values to coding education. The school operated until 2023, when its catalog was wound down and made available through other channels. Its course material remains some of the best work on the visual / creative end of front-end development.
The CourseFlix listing under this source reflects the SuperHi style: Page Transitions, Shaders for the Web (GLSL via Three.js for browser-native 3D effects), Data Visualization + D3.js, and Digital Project Management. The material is aimed at designers learning to code and at developers wanting to add depth on the visual / animated side of the web rather than yet another CRUD framework.
Watch Online 38 lessons
0:00
/ #1: Welcome to the Page Transitions course
All Course Lessons (38)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome to the Page Transitions course Demo | 00:48 | |
| 2 | Setting up ourselves for page transitions | 06:20 | |
| 3 | What's in our starter kit? | 05:04 | |
| 4 | Adding Barba.js to our project | 06:59 | |
| 5 | Setting up our HTML for Barba.js | 07:01 | |
| 6 | Setting up our Javascript for Barba.js | 06:56 | |
| 7 | Setting up Barba's CSS | 06:27 | |
| 8 | Adding nicer page transitions to our project | 06:00 | |
| 9 | Barba's beforeEnter hook | 06:21 | |
| 10 | Correcting our navigation links | 14:11 | |
| 11 | Changing the body tag with Barba's views | 11:38 | |
| 12 | Adding Barba's 'once' and adding CSS animations | 09:21 | |
| 13 | Welcome to Canvas Magazine! | 02:54 | |
| 14 | Setting up our project | 06:41 | |
| 15 | The IntersectionObserver | 17:35 | |
| 16 | Image display using the same IntersectionObserver | 06:43 | |
| 17 | Setting up Barba's HTML | 06:28 | |
| 18 | Initializing Barba.js | 04:08 | |
| 19 | Testing with Barba's CSS module | 03:06 | |
| 20 | Making sure our code works between pages | 08:15 | |
| 21 | Javascript Promises in hooks | 04:33 | |
| 22 | GSAP Timelines | 08:38 | |
| 23 | Adding current and next transitions with GSAP | 08:55 | |
| 24 | Adding a once transition | 04:31 | |
| 25 | Adding a product view and namespace | 06:09 | |
| 26 | Adding imagesLoaded to our loading | 05:28 | |
| 27 | Welcome to Wanderers | 02:22 | |
| 28 | Setting up our project HTML | 04:27 | |
| 29 | Setting up Barba | 05:25 | |
| 30 | Fading in our navigation | 06:07 | |
| 31 | Adding a photos fade and movement | 05:06 | |
| 32 | Adding a wiper effect | 10:44 | |
| 33 | Adding an image to our interstitial | 08:05 | |
| 34 | Adding text transitions | 08:45 | |
| 35 | Changing the text with data attributes | 06:29 | |
| 36 | Adding in multiple transitions | 09:08 | |
| 37 | Barba Prefetch | 02:14 | |
| 38 | Thanks for joining our course | 00:31 |
Unlock unlimited learning
Get instant access to all 37 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionCourse content
38 lessons · 4h 10m 33sShow all 38 lessons
- 1 Welcome to the Page Transitions course 00:48
- 2 Setting up ourselves for page transitions 06:20
- 3 What's in our starter kit? 05:04
- 4 Adding Barba.js to our project 06:59
- 5 Setting up our HTML for Barba.js 07:01
- 6 Setting up our Javascript for Barba.js 06:56
- 7 Setting up Barba's CSS 06:27
- 8 Adding nicer page transitions to our project 06:00
- 9 Barba's beforeEnter hook 06:21
- 10 Correcting our navigation links 14:11
- 11 Changing the body tag with Barba's views 11:38
- 12 Adding Barba's 'once' and adding CSS animations 09:21
- 13 Welcome to Canvas Magazine! 02:54
- 14 Setting up our project 06:41
- 15 The IntersectionObserver 17:35
- 16 Image display using the same IntersectionObserver 06:43
- 17 Setting up Barba's HTML 06:28
- 18 Initializing Barba.js 04:08
- 19 Testing with Barba's CSS module 03:06
- 20 Making sure our code works between pages 08:15
- 21 Javascript Promises in hooks 04:33
- 22 GSAP Timelines 08:38
- 23 Adding current and next transitions with GSAP 08:55
- 24 Adding a once transition 04:31
- 25 Adding a product view and namespace 06:09
- 26 Adding imagesLoaded to our loading 05:28
- 27 Welcome to Wanderers 02:22
- 28 Setting up our project HTML 04:27
- 29 Setting up Barba 05:25
- 30 Fading in our navigation 06:07
- 31 Adding a photos fade and movement 05:06
- 32 Adding a wiper effect 10:44
- 33 Adding an image to our interstitial 08:05
- 34 Adding text transitions 08:45
- 35 Changing the text with data attributes 06:29
- 36 Adding in multiple transitions 09:08
- 37 Barba Prefetch 02:14
- 38 Thanks for joining our course 00:31
Related courses
-
Modern HTML & CSS From The Beginning Course
By: Brad TraversyUnlock your potential by mastering HTML and CSS from the ground up with our comprehensive course.24 hours 21 minutes 52 seconds -
10 Mega Responsive Websites with HTML, CSS, and JavaScript
By: UdemyLearn to create 10 mega responsive websites with HTML, CSS, and JavaScript. Elevate your web development skills with modern design projects for your portfolio.21 hours 54 minutes 19 seconds 5 / 5 -
The Responsive Web Design Bootcamp
By: Kevin PowellIt gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way.17 hours 36 minutes 12 seconds
Frequently asked questions
What is Page Transitions about?
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
Who teaches Page Transitions?
Page Transitions is taught by SuperHi. You can find more courses by this instructor on the corresponding source page.
How long is Page Transitions?
Page Transitions contains 38 lessons with a total runtime of 4 hours 10 minutes. All lessons are available to watch online at your own pace.
Is Page Transitions free to watch?
Page Transitions is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Page Transitions online?
Page Transitions is available to watch online on CourseFlix at https://courseflix.net/course/superhi-page-transitions. The page hosts every lesson with the integrated video player; no download is required.