It's official; I'm making a course!
It's called Interactive SVG Animations — everything I know about SVGs distilled into four digestible modules. Launching later this year.
My interactive guide to SVG paths is now live!
A comprehensive deep dive into every single path command complete with challenges where you get to trace over icons. Huge thanks to
@iconists
for allowing me to use their icons in this guide!
It's a bit of a misconception that an SVG's viewbox has anything to do with its width. For the most part, the SVG's width is controlled by CSS and/or the width attribute *only*, while the viewbox is more akin the SVG's "camera":
~6 years ago I spent an ENTIRE Saturday animating a logo trim path in After Effects
It was exhausting...
Now I could do it in ~30 seconds w/o even leaving Figma using the
@LottieFiles
plugin 🤯
New post 🎉
A few weeks back I tried recreating (a mini)
@babeljs
from scratch to learn more about how compilers work. In this post, we explore how to make the first piece, the tokenizer.
I think I'm a new fan of prefetching.
The buttons in the first row aren't prefetched, while the rest are! Notice that there's no flash even though it involves a network call.
Code below.
The first batch of content for Interactive SVG Animations launches April 5th!
This covers everything from writing your own SVG code to working with SVGs using CSS and basic CSS animation techniques.
Here's a small sneak peek of what you can expect:
Spent the weekend working on the custom code editor for — includes shape macros, code formatting, and my favourite feature, context-aware visual indicators!
Lots of fun AST shenanigans here.
Finally got around to rebuilding my website after reading
@JoshWComeau
's book on building an effective dev portfolio. Built with Next.js and Framer Motion, deployed on
@vercel
✨
In the next drop for Interactive SVG Animations, we'll recreate and animate a simplified version of this beautiful chart from Fey!
No libraries, minimal JavaScript. Coming this Friday, May 10.
📣 New post!
When animating SVGs at work, I don't typically go and hand-code the SVG myself—most of the time, the SVG's already done in a Figma file somewhere. So how do you take an SVG in Figma and later animate it in code?
Read it here:
If you ever want your SVGs to be responsive but also keep your strokes a constant width, then you probably need:
vector-effect: non-scaling-stroke
With this, stroke will be measured in pixels, not user units, so it'll stay the same size regardless of how big the SVG is!
Super smol tip: use `font-variant-numeric: tabular-nums` for nicer looking number animations ✨
This setting works by changing all numbers to be monospaced!
🎁 I finally found some time to publish this. I really wanted to record a video about his interaction, but I suck at this. So... hit me with a DM if something is unclear. Code in the first comment...
@framer
#motion
#interaction
#design
Why do some interactions just feel great?
To find out, I wrote a 3000-word essay on deconstructing the craft of interaction design through metaphors and examples.
New post (and a site redesign!)
My favorite part about Framer Motion is its layout API - add the layout prop to any motion component and watch as that component joyfully transitions between positions and sizes.
How does it work?
A short summary below:
I don't personally learn things linearly, so I try to structure to be non-linear as well—here's a first pass at the table of contents page showing the non-linearity:
Excited to publish my blog, NotANumber!
For the first post, I talk about the sliding window pattern — a method to make your array algorithms a little faster.
Check it out!
🎉 New post!
What do these animations have in common? They're both implemented using React keys!
In this post, we'll explore how keys can be super helpful when writing
@framer
motion animations:
Module 2 of Interactive SVG Animations is now live!
This release covers SMIL—a non-JS approach to animating SVGs that lets you do a bunch of stuff that CSS can't!
Check it out:
One of the tricky things to get right in SVG path animations is picking the right `stroke-dasharray`, so I made this visual to help understand—pretty happy with how it turned out!
This sandbox is a treasure trove of neat
@framer
motion and SVG tricks! Amazing work
@austin_malerba
👏
I'm planning to write a post soon(tm) on the stuff I learned, but for now here's a quick breakdown animation:
Abstract and compose, folks
Hard problems don't have to stay hard if you just make them easy:
<BorderMask>
<BorderFollower />
</BorderMask>
Saw something like this floating around yesterday and couldn't help myself
@framer
@chakra_ui
My interview is live!
Huge thanks to
@emilkowalski_
for the interview. Feeling super grateful to be on this list alongside everyone that I look up to ✨
Making a Figma-like playground for my next post on Figma SVG exports
Found it suprisingly tricky to get the drag interactions correct, especially to make it play well with SVGs!
one of my favourite projects i did was this visual of leetcode problems back when i was interviewing - building this idea straight into the programming language would be super interesting 👀
I think my biggest issue with “regular programming” and algorithms stuff is the amount of extra work you need to do to get something visual on screen. I want data structures that know how they should be visualized or have some sort of rendering by default… the closest I think we
The next part of Interactive SVG Animations is all about paths! There was so much to talk about here that it grew into an entire module 😅
The first half of this module, covering path commands and path drawing animations, is coming next Monday, June 10!
New post 🎉
In this post, we reinvent the JS array one feature at a time — starting with a static array containing only numbers, and ending with an array that can grow and contain multiple data types. You'll learn a bit about how memory works too!
You can now preorder Interactive SVG Animations at a discounted price of $119USD (that's 40% off!)
While the course isn't quite done yet, I've heard from some folks who wanted to use their company stipend on it before it expires—now you can!
New weekend project — a code editor specifically tailored to learning about compilers, ASTs, and
@babeljs
-like transforms ✨
Play with it here! (it's VERY buggy and doesn't work on mobile 😅)
Last night I created a prototype for the upcoming section on : Moodboard, a place where I share works that inspired me while creating my website.
Built with
@framer
Motion, I'm still fascinated by the possibilities enabled by this awesome tool 😍
iOS is filled with little delightful interactions and the Safari navigation bar is no exception. Here’s a small recreation made using
@framer
Motion:
Short tutorial below.
Revamped my personal GitHub profile readme! 🎉
I’ve made a fully responsive website inside an SVG, loaded as an image, using HTML, inside markdown, inside a readme.md.
Not only is it interactive and supports light/dark mode, but it also includes a fallback for Firefox😂
#github
revisited my tiny japanese learning app over the weekend, trying to recreate native-like interactions on the web (works with trackpad too!)
fun aside: each swipe here is a page transition with data coming server side :)
TIL independent transform properties are available on all modern browsers! This means you can use `transition` alone to sequence different transforms instead of relying on CSS animations:
The latest module of Interactive SVG Animations is now live!
This module contains all things paths, including path commands, how to draw your own paths, and path drawing animations!
In the end, we'll recreate this little dynamic island-inspired timer:
Big fan of
@framer
motion's new(ish?) animation primitives—being able to play/pause animations imperatively makes making visuals like this one so much easier!
brushed up my sql this morning after not touching it since college, but managed to improve progress loading down to only one request!
video shows before/after, and the sql I wrote below.
Just published a new blog post: An Interactive Intro to CRDTs! It's the tangible, code-based introduction I always wanted, plus a bunch of interactive visualizations to help build an intuition for how CRDTs work.