Skyler

Design Engineer
• Building thoughtful, interactive products
• Creator of

[Skyler @MeetSkyler]

SVGs can dance too 💃Smooth path motion + dot-filled logo made with pure HTML, CSS & JS.
@oguzyagizkara
@necatikcl
Inspired by these two legends,Definitely not as flawless as Necat's motion pieces, but every frame taught me something new.

[Skyler @MeetSkyler]

@rakibulism You’re welcome! Glad you found it useful

[Skyler @MeetSkyler]

height: auto won’t animate smoothly.
grid-template-rows: 0fr → 1fr makes accordion expansion buttery smooth with pure CSS. 👇

[Skyler @MeetSkyler]

@pmjohnson Oh nice, I hadn’t tried this approach. Thanks for sharing!

[Skyler @MeetSkyler]

@AbelardoIT It’s an SVG path ... I animate its stroke-dashoffset from the full path length to 0, so the tick draws itself.

[Skyler @MeetSkyler]

The checkmark doesn’t appear.

stroke-dashoffset makes it draw itself and suddenly “success” feels satisfying. 👇

[Skyler @MeetSkyler]

@henriqueamsm Thanks!

[Skyler @MeetSkyler]

@vinicsr Thanks Vinny!

[Skyler @MeetSkyler]

@DesignedBy_Vic Thanks Victor! I did it by using SVG stroke-dasharray + stroke-dashoffset and animating the offset from the path length to 0

[Skyler @MeetSkyler]

@sophsnight98 The slower one, for sure. There’s something special about watching progress you couldn’t rush.

[Skyler @MeetSkyler]

@gabriell_lab Such a useful reference!

[Skyler @MeetSkyler]

@wtf_nakul7 The Pain is Real🥲🥲🥲

[Skyler @MeetSkyler]

@fidexcode vibe coders crying at the corner ...Real pain

[Skyler @MeetSkyler]

@pqoqubbw Small details, big UX improvement.

[Skyler @MeetSkyler]

@jiya_3063 No one can replace VS Code… but unfortunately, vibe coders might not understand this.

[Skyler @MeetSkyler]

The secret behind an iOS-feeling toggle? squash + stretch.

[Skyler @MeetSkyler]

Did you noticed the entire ⌘K experience . backdrop-filter: blur() is changing the whole experience.

[Skyler @MeetSkyler]

The magic isn't the drag... can you guess what it is?

[Skyler @MeetSkyler]

Tired of deleting the same files every new project? 😤
next.svg... vercel.svg... default CSS... AGAIN 🙄
`npx stackclean`✨
✅ Next.js, Vite, React & CRA
✅ One command fully clean

https://t.co/vgqbdtYBye
#ReactJS #NextJS #BuildInPublic

[Skyler @MeetSkyler]

@ElexPetter translateY() is why it feels alive.
You are right.

[Skyler @MeetSkyler]

The magic isn't the drag... can you guess what it is?

[Skyler @MeetSkyler]

@misshikhan654 yup real motion starts with transform and here 60ms delay changed everything.