A while back I created a webpage that when viewed on a desktop, synchronized an illustration to a users scrolling. I thought it was neat and wanted to share it.

I use plain ol vanilla JavaScript to create trigger points that are hit when a user scrolls down far enough. These trigger points adjust a y-axis transformation applied to the illustration on the left hand side.

Live Demo | Repository

How does it work?

In the video below I remove the mask used to hide the rest of the illustration, to give a better insight into how this works.

I essentially create one long illustrated graphic and apply a mask over the rest of the illustration so that it only displays the section that I want.

Next, I subscribe to the onscroll event to track the pageYOffset , from there I use trigger points that tell me where the user is then adjust the transformation of the illustration accordingly.

The magic is really all in the updateIllustrationOffset() function that is constantly checking the current scroll distance from the top of the window, and comparing that to preset trigger points.

...
/* trigger_01 */
else if (trigger_01 <= distanceFromTop && distanceFromTop < trigger_02) {
    illustrationContainer.className = "positionA";
    illustration.setAttribute("style", "transform: translate(-50%,-12.7%);")
}
/* trigger_02 */
else if (trigger_02 <= distanceFromTop && distanceFromTop < trigger_03) {
    illustrationContainer.className = "positionB";
    illustration.setAttribute("style", "transform:translate(-50%,-37.7%)");
}
...

If you’re looking to create something similar, feel free to use this example to get you started!