flâneur

propEffect | Render motion values to object props | Motion

motion.dev · 352 words · saved by 1 readers

Learn to use Motion's propEffect to dynamically apply motion values to JavaScript object properties. Understand how it facilitates re-rendering on updates, its utility for libraries like Three.js, and how to apply and clean up effects.

Docs propEffect 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 }) Usage Import propEffect from "motion"

saved by

related reading