Khoa Phan

Make websites "live" 👾

[Motion @motiondotdev]

Introducing Arcs in Motion 12.40.

Arcs animate elements along curved paths. These aren't static like offset-path, they're dynamic and work with both x/y and layout animations.

They're easy to tweak too, thanks to strength, peak, and auto-rotate options!

[Emil Kowalski @emilkowalski]

To get good animations from an AI you need to get good at telling it what you want:

- "stagger this list of items"
- "make this animation direction-aware"
- "spacial consistency", "crossfade", "layout animation",

I made a motion vocabulary for this:
https://t.co/ExAxpr31no

[Khoa Phan @khoaphan_dev]

@DivyanshT91162 @greensock 🔥🔥🔥

[Khoa Phan @khoaphan_dev]

Card Hover effect using clip-path 👀

#buildinpublic #motiondotdev

[Khoa Phan @khoaphan_dev]

Link: https://t.co/4aD0nUaIhU

[Khoa Phan @khoaphan_dev]

A collection of sticky card effects, craft with @motiondotdev

#khoaphan #buildinpublic

[Khoa Phan @khoaphan_dev]

Try to replicate the card spread flip effect by @watanabeeeeee but using @motiondotdev

[Khoa Phan @khoaphan_dev]

A good lib handling gradient borders, the best part is that it can also be applied to transparent backgrounds

by @flornkm

[Florian @flornkm]

Introducing the gradient border plugin

Familiar syntax, CSS-only, works everywhere. Easiest way for agents (and humans) to add border gradients via tailwind.

[GSAP @greensock]

💚 3.15 is out, with adaptive directional easing 👀

Ever called reverse() on an animation and noticed the motion feels... off? That's because reversing an animation also reverses the easing curve, so an ease-out becomes an ease-in. Now with easeReverse - you’ve got more creative control over how that reverse animation feels!

[Emil Kowalski @emilkowalski]

You can enroll in my animation course for the next 10 days!

It’s the perfect way to learn the theory behind great animations, but also how to build them in code.

Now with a skill file for coding agents.

We’ll cover all of these components and more, source code included.

[Khoa Phan @khoaphan_dev]

It’s been a while since I last worked with only Framer Motion, so now I want to get back into it and draft something using GSAP

[Carmen Ansio @carmenansio]

Just dropped a new article ✍️

Spring physics in CSS is one of those things you try once and can’t go back

https://t.co/H39VzmsTGZ

[Motion @motiondotdev]

Introducing <AnimateView /> - a 3kb component for using view transitions in React. Now in Motion+ Early Access.

Use Motion springs, define keyframes, fire callbacks, all without getting your feet muddy in pseudo-selectors.

[Khoa Phan @khoaphan_dev]

a new thing to play with 👀

[Locomotive® @LocomotiveMTL]

The long due update to our locomotive-scroll library is finally here.

Now built on top of Lenis (@LenisSmooth), plus our detection and animation layer.

Happy scrolling → https://t.co/dQ9BC2MKBB

[Khoa Phan @khoaphan_dev]

Demo link 👀 https://t.co/c4ht5mtmVe

[Khoa Phan @khoaphan_dev]

Interactive bars

Preview link is in 🧵

#animation #motion #buildinpublic

[Khoa Phan @khoaphan_dev]

@emilkowalski Definitely worth it 🫡

[Khoa Phan @khoaphan_dev]

Live demo: https://t.co/083ZLlTwZr

[Khoa Phan @khoaphan_dev]

Opening transition for a book

Built with @motiondotdev

Preview link is in 🧵

[Khoa Phan @khoaphan_dev]

Opening transition for a book

Built with @motiondotdev

Preview link is in 🧵