---
title: Transitions Between WebGL Scenes
description: Technical article and creative exploration from Kffein's research and development lab.
url: "https://kffein.com/en/lab/transition-entre-scenes-webgl"
date_modified: "2026-11-09T10:39:29-05:00"
---

 *Version française : [Transition entre scènes WebGL](https://kffein.com/fr/lab/transition-entre-scenes-webgl)*

# Transitions Between WebGL Scenes

**Author:** WebGL

**Role:** 2024

A great transition can transform a site’s entire experience. You just have to know how to build it.

## A Drive to Learn

During one of our design meetings, we came across the[Composite](https://www.composites.archi/) site, built by the agency[Spark](https://sparkk.fr/). Beautifully crafted, with a transition effect that catches the eye and makes you want to play with it. Its mechanics also reminded us of what we had done for our[Mipogg](https://mipogg.com/en/) project.

Not having access to the code, we had to work out how the effect was built, without knowing whether it was doable with our tools. Guillaume had never tackled this kind of transition before.  

We started from our multi-scene technique: two WebGL scenes that alternate through a mask. The shader uses[an image of leaves](https://www.composites.archi/_nuxt/displacement-7.CCVSl4xo.jpg) (the one from the Composite site) and a progress variable that sets the visibility ratio between scene A and scene B. A few extra parameters on the mask, like contrast and noise, refine the result. Finally, that same progress variable drives the movement of scene elements on scroll.

Here’s the result in our WebGL lab, with Kontrol, our params binding tool.

We’ve now mastered this technique, and it’s part of our toolkit for transitions on upcoming sites.