scroll triggers

A shader in a native component whose variants follow the page scroll. Scroll down to see the interaction.

get the plugin

scroll variant 1 of 3

variant 1 · Ink

Each step on this page is a scroll section. Reaching one sets the shader’s variant.

variant 2 · Dusk

The component tweens every value between two variants: colors, distortion, swirl and rotation.

variant 3 · Paper

Scroll back up and the variants play in reverse.

Mesh Gradient in a native component with three variants, set by native scroll variants.

You can wrap a shader inside a native Framer component and create multiple variants. Then use Framer’s native scroll variants to trigger a change of variant. The change of values and settings will animate for almost all property controls offering a slider.

Steps

Wrap your shader inside a Framer component (Cmd Option K)
Create multiple variants with different settings
Use native Framer scroll sections and scroll variants
Adjust the easing curve of the primary variant to control how fast the animation happens

Scroll variants work with any shader that has a Transition control, and Mesh Gradient is one of the three free ones. The setup steps are in the introduction.

Shaders by Paper is an independent product, not affiliated with paper.design. The shaders come from Paper Shaders, paper.design's open source library, released under the Apache 2.0 license.

tabbed sequence

Made with

in Framer