Section Wipes (manual)

Wiping in content using custom movement

To achieve this effect, simply create a full page container, that is pinned using the setPin method. Then create your panels inside of it and position them absolutely.

Now move in the panels using javascript and bind the movement to the scene progress.

The most convenient way to implement this is using GSAP and ScrollMagic's setTween method, as used in this example.

view source
ONE
TWO
THREE
FOUR