Page Transitions
4h 10m 33s
English
Paid
October 27, 2023
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
More
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
Watch Online Page Transitions
Join premium to watch
Go to premium
# | Title | Duration |
---|---|---|
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 |
Similar courses to Page Transitions
![Sass - from beginner to real world](https://cdn.courseflix.net/courses/100x56/sass-from-beginner-to-real-world.jpg)
Sass - from beginner to real world
Duration 8 hours 2 minutes 59 seconds
Course
![Beyond CSS](https://cdn.courseflix.net/courses/100x56/beyond-css.jpg)
Beyond CSS
Duration 14 hours 35 minutes 37 seconds
Course
![The Ultimate HTML5 & CSS3 Series: Part 3](https://cdn.courseflix.net/courses/100x56/the-ultimate-html5-css3-series-part-3.jpg)
The Ultimate HTML5 & CSS3 Series: Part 3
Duration 5 hours 38 minutes 4 seconds
Course
![Tailwind Mastery](https://cdn.courseflix.net/courses/100x56/tailwind-mastery.jpg)
Tailwind Mastery
Duration 2 hours 34 minutes 57 seconds
Course
![Zero to Full Stack Hero](https://cdn.courseflix.net/courses/100x56/zero-to-full-stack-hero.jpg)
Zero to Full Stack Hero
Duration 101 hours 29 minutes 59 seconds
Course
![10 Mega Responsive Websites with HTML, CSS, and JavaScript](https://cdn.courseflix.net/courses/100x56/10-mega-responsive-websites-with-html-css-and-javascript.jpg)
10 Mega Responsive Websites with HTML, CSS, and JavaScript
Duration 21 hours 54 minutes 19 seconds
Course
![HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid](https://cdn.courseflix.net/courses/100x56/html-css-bootcamp-learn-html-css-flexbox-and-css-grid.jpg)
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
Duration 20 hours 55 minutes 14 seconds
Course
![Mastering CSS Grid 2022 - With 3 cool projects](https://cdn.courseflix.net/courses/100x56/mastering-css-grid-2022-with-3-cool-projects.jpg)
Mastering CSS Grid 2022 - With 3 cool projects
Duration 17 hours 16 minutes 22 seconds
Course