CourseFlix

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.

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

About the Author: SuperHi

SuperHi thumbnail

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.

Watch Online 38 lessons

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
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

Course content

38 lessons · 4h 10m 33s
Show all 38 lessons
  1. 1 Welcome to the Page Transitions course 00:48
  2. 2 Setting up ourselves for page transitions 06:20
  3. 3 What's in our starter kit? 05:04
  4. 4 Adding Barba.js to our project 06:59
  5. 5 Setting up our HTML for Barba.js 07:01
  6. 6 Setting up our Javascript for Barba.js 06:56
  7. 7 Setting up Barba's CSS 06:27
  8. 8 Adding nicer page transitions to our project 06:00
  9. 9 Barba's beforeEnter hook 06:21
  10. 10 Correcting our navigation links 14:11
  11. 11 Changing the body tag with Barba's views 11:38
  12. 12 Adding Barba's 'once' and adding CSS animations 09:21
  13. 13 Welcome to Canvas Magazine! 02:54
  14. 14 Setting up our project 06:41
  15. 15 The IntersectionObserver 17:35
  16. 16 Image display using the same IntersectionObserver 06:43
  17. 17 Setting up Barba's HTML 06:28
  18. 18 Initializing Barba.js 04:08
  19. 19 Testing with Barba's CSS module 03:06
  20. 20 Making sure our code works between pages 08:15
  21. 21 Javascript Promises in hooks 04:33
  22. 22 GSAP Timelines 08:38
  23. 23 Adding current and next transitions with GSAP 08:55
  24. 24 Adding a once transition 04:31
  25. 25 Adding a product view and namespace 06:09
  26. 26 Adding imagesLoaded to our loading 05:28
  27. 27 Welcome to Wanderers 02:22
  28. 28 Setting up our project HTML 04:27
  29. 29 Setting up Barba 05:25
  30. 30 Fading in our navigation 06:07
  31. 31 Adding a photos fade and movement 05:06
  32. 32 Adding a wiper effect 10:44
  33. 33 Adding an image to our interstitial 08:05
  34. 34 Adding text transitions 08:45
  35. 35 Changing the text with data attributes 06:29
  36. 36 Adding in multiple transitions 09:08
  37. 37 Barba Prefetch 02:14
  38. 38 Thanks for joining our course 00:31

Related courses

  • Understanding HTML and CSS thumbnail

    Understanding HTML and CSS

    By: Udemy
    Deeply 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 CSS
    17 hours 52 minutes 36 seconds
  • Fundamentals of CSS Grid thumbnail

    Fundamentals of CSS Grid

    By: Zero To Mastery
    Learn how to create responsive and flexible layouts using CSS Grid. Master practical techniques for building modern interfaces on web pages.
    3 hours 32 minutes 35 seconds 5 / 5
  • The Ultimate HTML5 & CSS3 Series: Part 3 thumbnailFree

    The Ultimate HTML5 & CSS3 Series: Part 3

    By: Mosh Hamedani (Code with Mosh)
    Join The Ultimate HTML5 & CSS3 Series Part 3 for a comprehensive learning experience. Build professional-quality websites with modern HTML5 and CSS3 techniques.
    5 hours 38 minutes 4 seconds 5 / 5

Frequently asked questions

What is Page Transitions about?
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
Who teaches Page Transitions?
Page Transitions is taught by SuperHi. You can find more courses by this instructor on the corresponding source page.
How long is Page Transitions?
Page Transitions contains 38 lessons with a total runtime of 4 hours 10 minutes. All lessons are available to watch online at your own pace.
Is Page Transitions free to watch?
Page Transitions is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Page Transitions online?
Page Transitions is available to watch online on CourseFlix at https://courseflix.net/course/superhi-page-transitions. The page hosts every lesson with the integrated video player; no download is required.