Creating a simple portfolio website with WebGL and Barba.js

3h 41m 19s
English
Paid

Nothing beats smooth user experience. That is the reason we love WebGL, because we can do crazy effects with amazing performance. But if you combine that with smooth animation when the user navigates between pages, you get an awwward winning website. That’s exactly what we are going to create in this course.

Read more about the course

In this course I will focus on two main concepts. Firstly, we are going to learn how to do simple smooth page transitions with GSAP and Barba.js libraries. After that we will move to more advanced effects using FLIP concept for animations.

Secondly, I will teach you how you can create image-to-fullscreen animations on the website. That amazing zooming combined with WebGL shader effects that you often see on the coolest websites. I will explain the concept, and we will use it to create a couple of different effects. Don’t worry if you are not yet familiar with shaders, a short practical intro to them will be included in the course. So you can use it as your first step in learning them.

Then we will combine smooth page transition with cool WebGL effects. I will also include some tips on performance and where you can go from that. In the end we will have a simple but cool portfolio website with shader animations and smooth page transitions.

Watch Online Creating a simple portfolio website with WebGL and Barba.js

Join premium to watch
Go to premium
# Title Duration
1 Intro 00:47
2 Creating Boilerplate 24:56
3 Using shaders in THREE.js 12:54
4 Vertex Shaders 22:00
5 Fragment Shaders 15:16
6 Combining shaders 09:32
7 Sync HTML and WebGL dimensions 07:26
8 Creating Zoom Effect 11:11
9 Create zoom Effect 04:05
10 Fixing UV aspect ratio 12:00
11 Effect with corners 12:01
12 Effect with wave 05:48
13 Merge HTML and WebGL with custom scroll 06:32
14 Create meshes from images 09:47
15 Correct positioning 06:47
16 Resizing website 08:43
17 Mouse events 04:10
18 Barba.js intro 04:35
19 Creating smooth Barba.js transition 20:32
20 Using 11ty as a site generator 21:26
21 Thank you 00:51

Similar courses to Creating a simple portfolio website with WebGL and Barba.js

Data Visualization + D3.js

Data Visualization + D3.jssuperhi.com

Category: JavaScript, HTML, CSS, D3.js
Duration 16 hours 48 minutes 54 seconds
Shaders for the Web

Shaders for the Websuperhi.com

Category: JavaScript, Three.js, OpenGL Shading Language (GLSL)
Duration 16 hours 3 minutes 4 seconds
Build Telegram Bots with JavaScript: The Complete Guide

Build Telegram Bots with JavaScript: The Complete Guideudemy

Category: JavaScript, Node.js
Duration 5 hours 28 minutes 48 seconds
Web Components & Stencil.js - Build Custom HTML Elements

Web Components & Stencil.js - Build Custom HTML Elementsudemy

Category: JavaScript
Duration 8 hours 18 minutes 53 seconds
70+ JavaScript Challenges: Data Structures & Algorithms

70+ JavaScript Challenges: Data Structures & AlgorithmsBrad Traversy

Category: JavaScript
Duration 12 hours 29 minutes 29 seconds
Complete Web Developer in 2023: Zero to Mastery

Complete Web Developer in 2023: Zero to Masteryudemyzerotomastery.io

Category: JavaScript, HTML, CSS
Duration 35 hours 23 minutes 21 seconds
Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projectsudemy

Category: JavaScript, HTML, CSS, Node.js, MongoDB, JQuery
Duration 22 hours 11 minutes 13 seconds
Advanced JavaScript Unleashed

Advanced JavaScript Unleashedfullstack.io

Category: JavaScript
Duration
The Ultimate Web Scraping Course

The Ultimate Web Scraping CourseAdrian Horning (The Web Scraping Guy)

Category: JavaScript, Other (Frontend)
Duration 10 hours 39 minutes 26 seconds