Get a 50% discount when you buy 2 courses or more!
NEW Pre order Creating a simple portfolio website with WebGL and Barba.js By Yuri Artiukh
This offer ends:
$100 $35
Creating a simple portfolio website with WebGL and Barba.js
English English, Spanish, French (+3) [Auto]
3 Hours Course

Creating a simple portfolio website with WebGL and Barba.js

Pre order $100 $35

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.

Pre-order. This special price is available as you are buying the course in advance. The course will be available by the end of June. The price will increase as we get closer to the date and once it’s online it will be full price - so register now for a big discount.

(*) The times of the chapters as well as the total duration of the course are approximate and may have some variation

The subtitles are automatically generated, so the quality of the captions may vary.
  • WebGL
  • Interaction Design
  • Barba.js
  • JavaScript
  • UX Design
Course Table of contents
What will you learn?

6 sections • 11 lectures • 3 hours

  • Intro
    1 lectures 05:00 Mins
    • Introduction
      05:00 Mins
  • Smooth Page Transitions
    3 lectures 1 Hour
    • Preparing HTML/CSS
      20:00 Mins
    • Using Barba.js
      30:00 Mins
    • Advanced Barba.js usage
      10:00 Mins
  • WebGL part
    4 lectures 1 Hour 45 Mins
    • THREE.js intro and basic scene
      20:00 Mins
    • Shaders Intro
      40:00 Mins
    • Creating full-screen shader effect
      30:00 Mins
    • Variations of animation
      15:00 Mins
  • Combining WebGL page transitions
    1 lectures 30:00 Mins
    • Combining WebGL page transitions
      30:00 Mins
  • Using a simple CMS
    1 lectures 20:00 Mins
    • Using a simple CMS
      20:00 Mins
  • Performance, optimization
    1 lectures 15:00 Mins
    • Performance, optimization
      15:00 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

  • WebGL
  • Interaction Design
  • Barba.js
  • JavaScript
  • UX Design
$35 65% off $100

This offer ends:

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese [Auto]
  • 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

    @akella

    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.

    riverco.de

Similar Courses