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
Page Transitions is a 38-lesson 4 hours 10 minutes self-paced course by SuperHi. Integrate the Barba.
Course facts
- Lessons
- 38
- Duration
- 4 hours 10 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- SuperHi
- Price
- Premium
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
Who teaches Page Transitions? 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.
What lessons are included in Page Transitions?
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 subscriptionWhat courses are similar to Page Transitions?
-
Updated 7mo agoAdvanced CSS for Web Design
By: Zero To MasteryDeepen your knowledge of web design with a CSS course. Learn to bring websites to life by creating impressive and dynamic projects using modern capabilities.5h 9m -
Updated 2y agoMastering CSS Layout
By: Fullstack.ioLearn the Best Practices and Design Patterns behind every CSS layout. Know exactly what you should and shouldn't do at all times.1h 27m2/5 -
Updated 2y agoCSS Animations & Transitions
By: Level Up Tutorials (Scott Tolinski)Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitio2h 9m5/5 -
Updated 7mo agoBuild a Podcast Player with JavaScript, CSS and Node.js
By: Zero To MasteryLearn to create a full-stack podcast player using JavaScript, CSS, and Node.js. Develop skills in web development and add a project to your portfolio.8h 30m -
Updated 2y agoCSS Simplified
By: Web Dev Simplified (Kyle Cook)Learn how to create beautiful websites with over 100 video tutorials and 20+ unique projects designed to make learning CSS as easy and understandable as.15h 17m0/5 -
Updated 2y agoUnderstanding HTML and CSS
By: UdemyDeeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS17h 52m -
Updated 10mo agoComplete Web Developer in 2025: Zero to Mastery
By: Udemy, Zero To MasteryLearn to code. Get hired. This is one of the most popular, highly rated coding bootcamps online. It's also the most moderen and up-to-date. Guaranteed. You'll g37h 3m5/5
More courses by SuperHi
-
Updated 2y agoDigital Project Management
Smooth processes and happy human relationships are key to managing effectively. Learn better ways to work with complexity so you can run projects like a pro.17h 53m5/5 -
FreeUpdated 2y agoData Visualization + D3.js
Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and worki16h 48m5/5 -
Updated 3y agoShaders for the Web
Learn how to make OpenGL shaders using the programming language GLSL, and gain insight on how the top websites use hardware-enabled graphics.16h 3m
Frequently asked questions
What are the prerequisites for taking this course?
This course requires a basic understanding of HTML, CSS, and JavaScript. Familiarity with web development concepts is essential as you will be integrating the Barba.js library and using CSS and JavaScript for page transitions. It is beneficial to have experience with JavaScript libraries, though not mandatory, as the course will guide you through the integration process.
What projects will I build during the course?
During the course, you will work on projects like Canvas Magazine and Wanderers. These projects involve setting up HTML, CSS, and JavaScript for Barba.js, adding various transitions such as fading, wiper effects, and text transitions, and using tools like GSAP Timelines and imagesLoaded to enhance page transitions.
Who is the target audience for this course?
The course is aimed at web developers interested in enhancing user experience through smooth page transitions. It is suitable for those who want to learn how to integrate Barba.js into their websites and use advanced CSS and JavaScript techniques to create engaging effects.
How does this course compare to other web development courses?
This course specifically focuses on integrating Barba.js for page transitions and leveraging CSS and JavaScript for smooth effects. Unlike general web development courses, it provides a detailed exploration of page transition techniques and hooks such as beforeEnter and once, as well as the use of GSAP Timelines for dynamic transitions.
What specific tools and libraries will I learn to use?
The course covers the integration and use of the Barba.js library, along with CSS for styling transitions and JavaScript for functionality. You will also learn to use GSAP Timelines to create complex animations and handle images with the imagesLoaded library.
What topics are not covered in this course?
The course does not cover basic HTML, CSS, or JavaScript concepts, assuming prior knowledge in these areas. It also does not delve into server-side technologies, database management, or broader topics in web development beyond page transitions.
How much time should I expect to commit to this course?
Though the course runtime is not specified, it consists of 38 lessons. It is advisable to allocate sufficient time to set up projects, integrate Barba.js, and experiment with various transitions. Depending on your familiarity with the topics, the time commitment may vary.