Documentation

Documentation

JavaScript

propEffect

propEffect

Checking Motion+ status…

Unlocks for everyone in

32 Days 14 Hours 32 Minutes

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

32 Days 14 Hours 32 Minutes

Or

One-time payment, no subscription

Already joined?

Checking Motion+ status…

Unlocks for everyone in

32 Days 14 Hours 32 Minutes

Or

One-time payment, no subscription

Already joined?

propEffect applies the output of motion values to the properties of an object.

When these motion values update, the element will re-render once per frame during the render step of the frameloop.

const pos = { x: 0, y: 0, z: 0 }
const x = motionValue(0)

propEffect(pos, { x })

// Set x on pos to 100
x.set(100)

// Animate x on pos to 200
animate(x, 200)

This can also be used for rendering Three.js props:

const cube = new THREE.Mesh(geometry, material)
const x = motionValue(0)

propEffect(cube.position, { x })
Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.