Skip to main content

Creating a simple portfolio website with WebGL and Barba.js

3h 41m 19s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Intro

All Course Lessons (21)

#Lesson TitleDurationAccess
1
Intro Demo
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

Unlock unlimited learning

Get instant access to all 20 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

Up and Running With PixiJS

Up and Running With PixiJS

Sources: tutspluscom
PixiJS is a 2D graphics rendering JavaScript library that lets you create stunning visual effects in a flexible and performant manner
2 hours 8 minutes 52 seconds
CS50's Web Programming with Python and JavaScript

CS50's Web Programming with Python and JavaScript

Sources: HarvardX (Harvard University)
Topics include database design, scalability, security, and user experience. Through hands-on projects, you'll learn to write and use APIs, create interactive UI
14 hours 3 minutes 25 seconds
Building a Typechecker from scratch

Building a Typechecker from scratch

Sources: Dmitry Soshnikov
Untyped programs are often prone to errors, runtime exceptions, and can make debugging much harder. That’s why many production languages implement a static type
2 hours 16 minutes 15 seconds
Data Visualization + D3.js

Data Visualization + D3.js

Sources: superhi.com
Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and worki
16 hours 48 minutes 54 seconds