flâneur

useAnimate | Framer for Developers

framer.com · 753 words · saved by 1 readers

useAnimate provides a way of using the animate function that is scoped to the elements within your component. It provides a scope ref, and an animate function where every DOM selector is scoped to this ref. Additionally, when the component calling useAnimate is removed, all animations started with its returned animate function will be cleaned up automatically. Declarative animations via motion components tend to be simpler to write and maintain. However, imperative animations via useAnimate() are very powerful, allowing: Ultimately which you use depends on your needs and usecase. Import from "framer-motion". useAnimate returns two arguments, a scope ref and an animate function. This scope ref must be passed to either a regular HTML/SVG element or a motion component. This scoped animate function can now be used in effects and event handlers to animate elements. We can either use the scoped element directly: Or by passing it a selector. This selector is "li", but we're not selecting all

useAnimate provides a way of using the animate function that is scoped to the elements within your component. This allows you to use manual animation controls, timelines, selectors scoped to your component, and automatic cleanup. It provides a scope ref, and an animate function where every DOM selector is scoped to this ref. function Component () { const [ scope , animate ] = useAnimate () useEffect (() => { // This "li" selector will only select children // of the element that receives `scope`. animate ( " li " , { opacity : 1 }) }) return < ul ref = { scope } > { children } </ ul > } Additio

related reading