Page Transitions

4h 10m 33s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 38 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Page Transitions

0:00
/
#1: Welcome to the Page Transitions course

All Course Lessons (38)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Web Developer Bootcamp with Flask and Python in 2022

Web Developer Bootcamp with Flask and Python in 2022

Sources: udemy
Welcome to the Web Developer Bootcamp with Flask and Python! In this course, you'll learn how to build and deploy dynamic websites using Python, Flask, MongoDB,
19 hours 57 minutes 43 seconds
Mastering CSS Grid 2022 - With 3 cool projects

Mastering CSS Grid 2022 - With 3 cool projects

Sources: udemy
CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our...
17 hours 16 minutes 22 seconds
Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds
CSS Layout Masterclass

CSS Layout Masterclass

Sources: Nomad Coders
What will you make? 11 CSS Layout. We will clone 11 beautiful layout of movie, e-commerce and portfolio website..
6 hours 49 minutes 41 seconds