Motion

Introducing the Motion+ AI Kit. Tools and skills built for animating with AI. - Motion best practises - Code performance audit - Generate CSS springs - Visualise transitions - Documentation search One-time payment, lifetime updates. Also available on a new $99 tier.

I'll have what he's having

what if browsing a design archive felt like floating inside a gallery? built with @motiondotdev

Motion 12.38 introduces the layoutAnchor prop. A common problem with view transitions is children being "left behind" by their parents. Motion solves this with its parent-relative calculations. layoutAnchor now lets you choose the anchor point for this - or disable it entirely!

fun little blog filters with css anchor positioning

I'm not who you think I am... The experiment is complete, now comes the reveal. Reserve your seat with the link below: ↓

Episode 5 of our collaboration with @simonswiss is up! Learn how to sequence animations across components. Stagger, delay, animate before/after parents. All possible with simple variants. youtube.com/watch?v=h-bHVL…

Recently saw an animation on Interface Craft website by @joshpuckett Tried recreating it with @motiondotdev using 𝚝𝚛𝚊𝚗𝚜𝚏𝚘𝚛𝚖 𝚊𝚗𝚍 𝚝𝚛𝚊𝚗𝚜𝚕𝚊𝚝𝚎 Didn't use the layout prop, Did it entirely with width animations Video out

@0xNotthatsundar maskImage doesn't composite on the GPU - you might be thinking of clipPath? The fallback is an instant switch.

@motiondotdev View Transition API’s `maskImage` composites on the GPU — no layout or paint, just transform. Old skeletons that hard-code sizes cause CLS because dimensions are guesses before content loads. Does `AnimateView` fall back to CSS-only in browsers without View Transitions?

New Motion+ example: Skeleton Uses invisible placeholder content rather than manual sizing to reduce layout shifts. AnimateView handles the maskImage animation via the browser's View Transition API.

🚀 Motion 12.37 can animate oklch, oklab, lab, lch, color-mix() and other modern CSS colors. When detected, these animations are routed through the browser's native animation engine for extensive color mixing capabilities with no added bundlesize.

@10xshivam Looks awesome, keep going!

day 7 of playing with @motiondotdev made a animated text effect with staggered word reveal will continue after exams :(

@xandjiji @Saeris @steveruizok We did! motion.dev/docs/animation…

@Saeris @steveruizok good article, @motiondotdev could create a skill.md of it

genuine question for react heads, which of these is most performant? Consider that we may have thousands of them all receiving new x y props on each frame.

Given our smooth tabs Motion+ example a small facelift. Now featuring direction-aware content swapping.

@bryanmonterreyx You can have half of one JOCCQ

@motiondotdev can I have a free lifetime code

@JuicyBenjamin @mattgperry Yeah this is React, would need a newer version as AnimateView is built on its ViewTransition component

@motiondotdev @mattgperry Does this work in react or do we need the view transition component to be able to do this?

@ild0tt0re @mattgperry Yes! motion.dev/docs/ai-kit

@motiondotdev @mattgperry Did you have official agent skills for this library?

This latest Motion example is probably a sign we've been playing too much Pokopia

@pinesheet motion.dev/docs/ai-kit

@motiondotdev agent skills pls 🙏

Added candlestick charts to Bklit UI 👉🏼 ui.bklit.com/charts/candles… ✨ Animated with @motiondotdev ✨ visx/d3 under the hood ✨ Available with the @shadcn cli #oss #data #charts #fintech

New Motion+ example: OSS Hero The glows use a simple trick: giving x and y animations different prime-number durations. x repeats every 23 seconds, y every 19. This means the same visual state isn't repeated for over seven minutes.