scroll triggers

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

1. Wrap your shader inside a Framer component (Cmd Option K)

2. Create multiple variants with different settings

3. Use native Framer scroll sections and scroll variants

4. Adjust the easing curve of the primary variant to control how fast the animation happens

How this demo is set up

• The component has three variants, Ink, Dusk and Paper. Each one gives the Mesh Gradient its own colors, distortion, swirl, rotation and scale.

• The page has three step sections, each named as a scroll section: Step 1, Step 2 and Step 3.

• The component on the page has one Scroll Variant effect with the Section in View trigger. Step 1 sets Ink, Step 2 sets Dusk and Step 3 sets Paper.

• Each change fires when about half of its step is on screen, and plays again in reverse when you scroll back up.

• The shader’s Transition control sets how long each change takes: here 1 second, on an ease-in-out curve.

Questions

Does it work on phones?

Yes. The steps are ordinary sections, so the same effect runs at every breakpoint. We checked it at desktop, tablet and phone widths.

Why does a setting jump instead of animating?

Only controls with a slider tween between variants. A setting you pick from a list changes at once when the variant switches.

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.