New season, New skills! All Courses at $9.99

Creating a simple portfolio website with WebGL and Barba.js

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Duration: 3 Hours 30 Mins
Now
9.99$
/$100

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.

Category Course format Language Duration Level
Code, UX Design Online English with Subt. 3 Hours 30 Mins Beginners & Intermediate

Requirements

This course is designed for beginners and intermediate levels. You only need a standard web development IDE.


Description

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.

You will learn

  • A quick overview of shaders
  • Create smooth animated transitions with GSAP and Barba.js
  • Create create image-to-fullscreen animations using three.js
  • Create a portfolio implementing WebGL transitions

The course includes

  • 3 hours and 30 mins of practical and condensed knowledge
  • Immediate access to the entire collection of videos
  • Downloadable source files for every lesson
  • Valuable links and resources for every lesson
  • Certificate of completion

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    WebGL
    • Intro
    • Creating Boilerplate
    • Using shaders in THREE.js
    • Vertex Shaders
    • Fragment Shaders
    • Combining shaders
    • Sync HTML and WebGL dimensions
    • Creating Zoom Effect
    • Create zoom Effect
    • Fixing UV aspect ratio
    • Effect with corners
    • Effect with wave
  • Lesson 2
    Implementing transition in HTML
    • Merge HTML and WebGL with custom scroll
    • Create meshes from images
    • Correct positioning
    • Resizing website
    • Mouse events
  • Lesson 3
    Smooth Page Transitions
    • Barba.js intro
  • Lesson 4
    Combining WebGL page transitions
    • Creating smooth Barba.js transition
  • Lesson 5
    Using a simple CMS
    • Using 11ty as a site generator
  • Lesson 6
    Conclusion
    • Thank you

Meet the teacher

Yuri Artiukh

Creative developer, CTO of frontend agency

Yuri leads a small frontend agency riverco.de in Kyiv, Ukraine. Also streams occasionally on youtube about creative coding and frontend development. He is very passionate about watermelons, math, frontend performance and generative art.

Now
9.99$
/$100

Course Content

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.

Features

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginners & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses