Page Transitions

Name: Page Transitions
Price: 9 USD
Availability: InStock

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.

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