CF

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.

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.

About the Author: Awwwards

Awwwards thumbnail

Awwwards is the long-running design-recognition site that selects and showcases the best web design work published online — and now also operates a paid course platform staffed by the same kind of high-craft front-end developers whose sites win Awwwards Site of the Day awards.

The CourseFlix listing carries four Awwwards courses on the visual / animated end of front-end engineering: Impress everyone with a 3D particle scene with Blender and Three.js, Creating a simple portfolio website with WebGL and Barba.js, Merging WebGL and HTML worlds, and Using motion design to animate with purpose. Material is paid and aimed at designers and developers building portfolio-grade interactive sites.

Watch Online 21 lessons

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

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling, it is beneficial to have a basic understanding of HTML, CSS, and JavaScript, as these foundational web development skills will be essential for working with WebGL and Barba.js in the course. Familiarity with web development concepts will make it easier to grasp the shader and animation techniques taught in the lessons.
What will I build during this course?
During the course, you will build a simple portfolio website that uses WebGL for high-performance graphical effects and Barba.js for smooth page transitions. This project will help you gain practical experience in creating visually engaging and interactive web experiences.
Who is the target audience for this course?
This course is targeted at web developers and designers interested in enhancing their websites with advanced graphics and animations using WebGL and Barba.js. It is suitable for those who want to create visually appealing and smoothly transitioning user interfaces.
How does the course content compare to other WebGL courses?
Unlike generic WebGL courses, this course specifically focuses on integrating WebGL with HTML using THREE.js and Barba.js for smooth transitions. It is tailored for creating a portfolio website, providing a practical application of WebGL and Barba.js together, which may not be covered in standard WebGL-focused courses.
What specific tools and platforms will I learn to use in this course?
The course covers the use of THREE.js for WebGL graphics, Barba.js for managing smooth transitions between pages, and 11ty as a static site generator. You will also work with shaders, including vertex and fragment shaders, to create various effects and interactions.
What topics are not covered in this course?
This course does not cover basics of HTML, CSS, or JavaScript, nor does it delve into server-side programming or advanced backend technologies. It focuses on frontend techniques, specifically using WebGL and Barba.js to enhance user experience with animations and transitions.
What is the time commitment required for this course?
The course consists of 21 lessons, but the total runtime is not specified. Prospective students should be prepared to spend time on both the lessons and practical exercises, especially if they are new to WebGL or Barba.js, as mastering these tools may require additional practice beyond the lesson content.