Page Transitions

4h 10m 33s
English
Paid

Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.

Read more about the course

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

Zero to Full Stack Hero

Zero to Full Stack Heropapareact.com

Category: JavaScript, React.js, Others, CSS, Node.js, GraphQL, Firebase
Duration 101 hours 29 minutes 59 seconds
Complete CSS

Complete CSSAndy Bell

Category: CSS
Duration 32 minutes 45 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024Academind Pro

Category: JavaScript, Sql, HTML, CSS, Node.js, Vue
Duration 78 hours 51 minutes 55 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwindprotailwind.com (Simon Vrachliotis)Simon Vrachliotis

Category: CSS, Figma
Duration 2 hours 40 minutes 16 seconds
Modern HTML & CSS From The Beginning Course

Modern HTML & CSS From The Beginning CourseBrad Traversy

Category: HTML, CSS
Duration 24 hours 21 minutes 52 seconds
Learn CSS Today

Learn CSS Todaywebdevsimplified.com

Category: CSS
Duration 9 hours 31 minutes 49 seconds
CSS Demystified: Start writing CSS with confidence

CSS Demystified: Start writing CSS with confidencekevin powell

Category: CSS
Duration 20 hours 45 minutes 24 seconds