NEW Special offer Creating a simple portfolio website with WebGL and Barba.js By Yuri Artiukh
$100 $25
Creating a simple portfolio website with WebGL and Barba.js
English English, Spanish, French (+3) [Machine translation]
3 Hours 30 Mins Course

Creating a simple portfolio website with WebGL and Barba.js

SUMMER SALE!     $100 $25

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.

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

6 sections • 21 lectures • 3 hours 30 mins

  • WebGL
    12 lectures 2 Hours 17 Mins
    • Intro
      00:46 Mins
    • Creating Boilerplate
      24:56 Mins
    • Using shaders in THREE.js
      12:53 Mins
    • Vertex Shaders
      21:59 Mins
    • Fragment Shaders
      15:16 Mins
    • Combining shaders
      09:31 Mins
    • Sync HTML and WebGL dimensions
      07:26 Mins
    • Creating Zoom Effect
      11:10 Mins
    • Create zoom Effect
      04:05 Mins
    • Fixing UV aspect ratio
      12:00 Mins
    • Effect with corners
      12:00 Mins
    • Effect with wave
      05:47 Mins
  • Implementing transition in HTML
    5 lectures 35:57 Mins
    • Merge HTML and WebGL with custom scroll
      06:31 Mins
    • Create meshes from images
      09:47 Mins
    • Correct positioning
      06:47 Mins
    • Resizing website
      08:43 Mins
    • Mouse events
      04:09 Mins
  • Smooth Page Transitions
    1 lectures 04:34 Mins
    • Barba.js intro
      04:34 Mins
  • Combining WebGL page transitions
    1 lectures 20:31 Mins
    • Creating smooth Barba.js transition
      20:31 Mins
  • Using a simple CMS
    1 lectures 21:26 Mins
    • Using 11ty as a site generator
      21:26 Mins
  • Conclusion
    1 lectures 00:50 mins
    • Thank you
      00:50 Mins
Course details

Creating a simple portfolio website with WebGL and Barba.js

Creating a simple portfolio website with WebGL and Barba.js

By Yuri Artiukh

$25 75% off $100


  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginners & Intermediate
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Yuri Artiukh

    Yuri Artiukh

    Creative developer, CTO of frontend agency


    Yuri leads a small frontend agency 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.

Similar Courses