Chapter 86: styleEffect

Core Idea

Discover Motion's styleEffect for applying motion values to HTML elements. Learn how it supports independent transforms, default unit types, CSS properties, and enables efficient re-rendering on motion value updates.

Key Concepts

• Cancel: styleEffect returns a cleanup function which
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const blur = motionValue(2)
const filter = transformValue(() => `blur(${blur.get()}px)`)

styleEffect("img", { filter })

• What it demonstrates: Core usage pattern for styleEffect.

Key Takeaways

1. Independent transforms (x, scaleY etc).
2. Default unit types (i.e use numbers like 100 instead of "100px").
3. CSS properties.

Connects To

• motionValue: related Motion doc page.
• frame: related Motion doc page.
• attrEffect: related Motion doc page.
• propEffect: related Motion doc page.
• svgEffect: related Motion doc page.