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.
Creating a simple portfolio website with WebGL and Barba.js
3h 41m 19s
English
Paid
Creating a simple portfolio website with WebGL and Barba.js is a 21-lesson 3 hours 41 minutes self-paced course by Awwwards. Nothing beats smooth user experience.
Course facts
- Lessons
- 21
- Duration
- 3 hours 41 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Awwwards
- Price
- Premium
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.
Who teaches Creating a simple portfolio website with WebGL and Barba.js? Awwwards
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.
What lessons are included in Creating a simple portfolio website with WebGL and Barba.js?
0:00
/ #1: Intro
All Course Lessons (21)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionWhat courses are similar to Creating a simple portfolio website with WebGL and Barba.js?
-
Updated 3y agoTesting JavaScript with Kent C. Dodds
By: Kent C. DoddsThis course will apply the four-layer testing method to a React application, but this foundational strategy can be applied across any JavaScript framework: Angu14h 11m -
Updated 2y agoData Structures & Algorithms - JavaScript
By: UdemyThat means that you can actually learn more material in less time and have higher retention of the material. That is the key combination of factors to prepare y6h 44m5/5 -
Updated 2y agoMake a Google search engine clone: JavaScript PHP and MySQL
By: UdemyDo you want to become an expert in JavaScript, PHP and MySQL?Do you want to build a real search engine just like Google? If so, you’re in the right place!5h 47m5/5 -
ClassicBecome a WordPress Developer: Unlocking Power With Code
By: UdemyLearn PHP, JavaScript, WordPress theming & the WP REST API to Create Custom & Interactive WordPress Websites.41h 45m5/5 -
ClassicAnimating the web with Framer Motion
By: Jeroen ReumkensMaking smooth, performant and beautiful animations is hard. Framer Motion helps you overcome a lot of these struggles. In this course, I'll guide you through ev6h 3m5/5
More courses by Awwwards
-
Updated 2y agoUsing motion design to animate with purpose and create delightful experiences
Motion design creates movement, excitement and adds life to otherwise static experiences.2h 52m -
Updated 3y agoMerging WebGL and HTML worlds
You learn how to mix WebGL scenes with your HTML page. You use site images and add smooth effects with Three.js to make each part feel linked.2h 30m -
Updated 3y agoImpress everyone with a 3D particle scene with Blender and Three.js
When you work as a developer you know that the budget for outsourcing and finding the perfect content creator for your project may be a long and unpleasant proc2h 11m
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.