Welcome to the workshop Mastering Scrolling Animations: Mapping And Interpolations! This is a Notion page that I've prepared for us to go through step by step, just in case you miss any specific implementation throughout the workshop.

All the code for this workshop is going to be written using JavaScript from scratch, which helps you have more control over your animation and also on understanding how other libraries usually work internally.

<aside> 💡 I've also prepared a GitHub repository for you to check out the code any time that you want, please share with me your GitHub username so I can invite you to the repository. If you don't have a GitHub account yet, don't worry, you can create it later, and for now, I can share the ZIP file with you.

</aside>

In this workshop, you will learn how to implement the following techniques from websites that I've developed in the past:

  1. Scrolling.js: smooth scrolling component with requestAnimationFrame that can be reused in multiple contexts.

    Screen Shot 2022-09-03 at 8.08.12 PM.png

  2. Translate, Scale and Rotate UI elements: using the previous Scrolling.js component, you'll learn how you can manipulate DOM elements as the user is scrolling through the page in the most performant way possible (by reusing getBoundingClientRect positions).

    Garoa Skincare.mov

  3. WebGL interactions: still using the previous Scrolling.js component, you'll learn how you can calculate the speed and other values from DOM to implement outstanding WebGL animations on your page.

    Kacper Chlebowicz.mov

  4. Playing with a GLSL Shader mask in the scroll: a special part of the workshop, we'll finally use all the power from Scrolling.js and we'll finalize our project with a special mask animation that is controlled by the user scroll position.

    Castle Crush.mov

  5. Depending on how much time we have left, we'll create a scrolling animation together from scratch from one of the examples you guys want.

Now that I've already introduced you to some of the animations we'll be implementing together, let's dive into them in the following sections of this document.

What are mapping and interpolation functions?

These two functions are part of the core implementation of most of the scrolling animation libraries. In this section, we'll understand how they're implemented in code.

I hate math, so we'll skip the original concept slightly to be able to get straight into code. But basically, you need to be aware that mapping and interpolation are math functions that you'll use in your websites to control the easing, duration, and values of your animations.