nanda @nandafyi Twitter profile

Pinned Tweet

nanda

1 year

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.

67

168

2K

Last Seen Profiles

@i_yl_a

@Shturman_kkkkkk

@HSIndyRacing

@KyleSeraphin

@yq_koi

@shingeki_amane

@VitaliySmolin

@eueangel14

@Indefbc1925

@vini_vx_

@american_c_girl

@NCTMarketPH_

@Nounourslechat

@Coach_Glas

@Mathias_arnt

@AcademieNice

@reed9688

@WynterWoof

@ethanbudowsky

@Daniel_mitch10

@SalieriSighs

@anchai_103

@alexmac06

@NMnewdelhi

@phantasyqwq

@reira4406958301

@elisalarrinaga

@forstraybabies

@aliabotalal

@TufferTheRat

@TonShipCom

@StanDehaene

@Linalaherre

@barchie999

@LegoMikuTH

@HayatMall

nanda

@nandafyi

1 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!

47

466

2K

nanda

@nandafyi

6 months

That's an hour of my day I'm never getting back

96

51

2K

nanda

@nandafyi

7 months

little scrollbar experiments

21

70

1K

nanda

@nandafyi

1 year

Recreated @family 's whimsical number input today using Framer Motion. Check it out: Short tutorial below.

20

81

1K

nanda

@nandafyi

1 year

@ariellelok That’s a green flag ngl

6

8

1K

nanda

@nandafyi

1 year

Thank you @vercel 🙏

29

13

1K

nanda

@nandafyi

8 months

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":

10

93

851

nanda

@nandafyi

1 year

Back to the SVG paths app after a while. Little detail at the end 👀

16

68

833

nanda

@nandafyi

4 months

i absolutely refuse to believe this is the grammatically correct place for the period

31

25

759

nanda

@nandafyi

10 months

Spent a bit *too* much time on this hero animation, but pretty happy with how it turned out (it's entirely HTML/CSS/JS/SVG!)

23

27

667

nanda

@nandafyi

6 months

Also possible in just a few lines of SVG! Sandbox here:

Ridd 🤿

@ridd_design

6 months

~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 🤯

8

21

310

5

42

644

nanda

@nandafyi

1 year

Prototyping today with @nextjs app dir, @tailwindcss and @framer motion! Play with it here: (note: not responsive whatsoever 😅)

14

46

629

nanda

@nandafyi

2 years

Just shipped a redesign of the landing page for ! Check it out:

18

31

585

nanda

@nandafyi

2 years

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.

24

75

565

nanda

@nandafyi

1 year

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.

4

27

502

nanda

@nandafyi

2 years

Still need some tweaks, but quite liking this new visual for :

9

33

495

nanda

@nandafyi

1 year

finishing up the lines portion of my SVG paths guide — still need some tweaks, but happy with how it turned out!

9

34

495

nanda

@nandafyi

3 months

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:

10

44

489

nanda

@nandafyi

3 months

Interactive SVG Animations is now live! If you've purchased the course, you can sign in the link below:

21

45

481

nanda

@nandafyi

1 year

A bit rough around the edges, but a small sneak peek — pretty happy with it so far!

7

20

466

nanda

@nandafyi

1 year

TIL about the animateMotion SVG element! Use it to animate an element on a path:

9

35

432

nanda

@nandafyi

1 year

Pretty excited with how this little project is going 👀 Hoping I'll have something to share soon!

7

21

414

nanda

@nandafyi

9 months

SVGs are so cool honestly — here's an icon transition that works completely without JS (not even a click handler on the button!)

5

34

413

nanda

@nandafyi

10 months

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.

9

44

414

nanda

@nandafyi

3 years

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 ✨

14

27

392

nanda

@nandafyi

2 months

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.

14

22

392

nanda

@nandafyi

1 year

spent the day extending my Japanese app with vocab, with data courtesy of :

14

357

nanda

@nandafyi

9 months

Spent the weekend on visuals for the timing functions portion of — pretty happy with how it turned out!

5

30

342

nanda

@nandafyi

8 months

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!

5

11

338

nanda

@nandafyi

9 months

Super smol tip: use `font-variant-numeric: tabular-nums` for nicer looking number animations ✨ This setting works by changing all numbers to be monospaced!

4

14

332

nanda

@nandafyi

1 year

Just learned last night my GF will NOT bother with a website if it doesn't have dark mode. In other news, now supports dark mode!

5

14

322

nanda

@nandafyi

1 year

This is such a fun animation, I gave my own shot at remaking it (just the enter/exit card one for now)! Play with it here:

brain function collapse

@brainFnCl

1 year

🎁 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

28

104

2K

0

25

304

nanda

@nandafyi

1 year

My toxic trait is redesigning a website three times and never shipping (fingers crossed this is the last one!)

12

7

303

nanda

@nandafyi

1 year

This was a fun one to make with Framer Motion:

4

14

285

nanda

@nandafyi

1 year

dark mode toggle

5

8

278

nanda

@nandafyi

11 months

still need some tweaks, but little sneak peek of one of the practice questions for :

3

25

281

nanda

@nandafyi

2 years

LOVE this animation, so I gave a shot at remaking it! Sandbox below, but this shows a bit of how I approached it:

rauno

@raunofreiberg

2 years

17

13

441

4

14

273

nanda

@nandafyi

1 year

pretty happy with how the arc section is turning out! just to work on mobile next...

7

12

268

nanda

@nandafyi

1 year

Rauno really didn't have to film all these examples, but he did, and I love it so much — 10/10 read

rauno

@raunofreiberg

1 year

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.

96

664

3K

2

21

262

nanda

@nandafyi

2 years

Quite liking these OG images I made for a redesigned ... not too sure about the main "Not a Number" one though 🤔

5

7

246

nanda

@nandafyi

2 years

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:

10

29

246

nanda

@nandafyi

1 year

working on the monthly redesign, as promised 😂

5

6

238

nanda

@nandafyi

1 year

Liking how these dot animations turned out:

5

12

236

nanda

@nandafyi

1 year

Now to somehow make this mobile friendly...

8

9

236

nanda

@nandafyi

3 years

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!

14

26

237

nanda

@nandafyi

8 months

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:

10

234

nanda

@nandafyi

1 year

work in progress

13

3

227

nanda

@nandafyi

1 year

🎉 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:

5

17

221

nanda

@nandafyi

1 month

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:

4

17

222

nanda

@nandafyi

2 years

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:

Austin Malerba

@austin_malerba

2 years

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

2

19

174

1

12

210

nanda

@nandafyi

11 months

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 ✨

ui.land

ui.land is The Digital Library for Designers and Engineers.

ui.land

2

23

205

nanda

@nandafyi

3 years

New post! 🎉 I talk about how I build , going in depth into ASTs and @babeljs 's plugin APIs. Check it out:

5

34

201

nanda

@nandafyi

3 months

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 👀

Tyler Angert

@tylerangert

3 months

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

22

18

224

7

8

199

nanda

@nandafyi

4 months

smol draggable button for

8

15

197

nanda

@nandafyi

3 years

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!

8

22

194

nanda

@nandafyi

20 days

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!

5

12

194

nanda

@nandafyi

6 months

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!

16

13

190

nanda

@nandafyi

2 years

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 😅)

5

11

181

nanda

@nandafyi

1 year

Prototyped a "learnable programming"-like code editor using code mirror this morning:

7

6

181

nanda

@nandafyi

1 year

little detail

4

6

180

nanda

@nandafyi

1 year

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.

2

7

175

nanda

@nandafyi

1 year

absolutely gorgeous website:

Yann-Edern Gillet

@yannglt

1 year

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 😍

4

6

105

1

15

175

nanda

@nandafyi

2 years

Guess I'm part of the meme now; super excited to be joining @vercel next week!

19

0

171

nanda

@nandafyi

7 months

Made possible by the `foreignObject` element! It's keyboard-navigatable too 🤯

Terkel Gjervig

@terkelg

7 months

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

70

193

2K

2

9

172

nanda

@nandafyi

2 years

Experimenting with a different design for 's landing page; putting the interactive components front and center:

4

11

169

nanda

@nandafyi

7 days

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 :)

7

3

165

nanda

@nandafyi

8 months

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:

2

8

163

nanda

@nandafyi

1 year

In love with this icon transition, quickly recreated it:

Benji Taylor

@benjitaylor

1 year

Fun little detail when navigating between the start page and tabs page in the new @family browser

8

9

235

3

8

161

nanda

@nandafyi

2 years

10

9

159

nanda

@nandafyi

3 months

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!

3

5

154

nanda

@nandafyi

5 months

Quite like how this animation for turned out:

5

7

156

nanda

@nandafyi

1 year

codemirror is fun

3

11

152

nanda

@nandafyi

1 year

this is SO good - I love how the code changes based on your selection

Raul Mihaila

@MihailaRaul1

1 year

I built a small code explorer.

16

62

948

1

11

149

nanda

@nandafyi

13 days

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:

2

9

149

nanda

@nandafyi

1 year

Got this background animation today using a pretty cool technique — useMotionTemplate and animating SVG viewBox! Code snippet below.

2

8

142

nanda

@nandafyi

2 years

Love this! Just implemented it in (before/after):

Shu

@shuding_

2 years

React Wrap Balancer: Simple React Component That Makes Titles More Readable

41

162

2K

1

11

142

nanda

@nandafyi

2 years

is on HN front page 🤯

9

1

140

nanda

@nandafyi

2 years

Pretty happy with how this little interactive component is going for my coming FLIP post:

2

13

136

nanda

@nandafyi

1 year

little preview of the quiz results screen for my japanese app (I think I need a name now 😂)

9

7

137

nanda

@nandafyi

1 year

Mocking out a loading screen for first visits... (aside: does this make sense at all?)

7

6

132

nanda

@nandafyi

2 years

I thought the last version of this animation was a tad too challenging, so I added some "shadows"—not super sure how I feel about it yet

4

7

122

nanda

@nandafyi

6 months

A really simple trick to creating a rectangular mask for an SVG is to wrap the element in *another* SVG element:

0

11

123

nanda

@nandafyi

3 years

Finally got a chance to start working on the blog again after a crazy 2 weeks. Peep the new AST widget 👀

2

11

119

nanda

@nandafyi

2 years

Prototyping a component for a future post...

1

3

122

nanda

@nandafyi

2 years

Playing around with interactive playgrounds... (also, dragging svgs are quite tricky!)

3

8

119

nanda

@nandafyi

1 year

fun little arc commands

2

3

116

nanda

@nandafyi

1 year

updated the visual feedback for arcs a little bit

2

3

114

nanda

@nandafyi

5 months

Went on vacation for ~2 weeks and didn't code the whole time (longest in *years*) Now that I'm back, excited to continue working on !

Interactive SVG Animations

An interactive mini-course on creating SVG animations by Nanda Syahrasyad.

www.svg-animations.how

1

3

115

nanda

@nandafyi

1 year

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.

2

4

109

nanda

@nandafyi

1 year

This morning's progress, a visual for the T path command:

5

4

113

nanda

@nandafyi

1 year

*Almost* done with the cubic curves section - now with more interaction feedback!

3

5

113

nanda

@nandafyi

1 year

little @framer motion x Radix UI microinteraction, not sure how I feel about it yet

5

108

nanda

@nandafyi

1 year

Last night's update — login and track progress!

2

3

109

nanda

@nandafyi

7 months

preparing your inbox

2

106

nanda

@nandafyi

9 months

Always love to see more interactive articles! This is a fun one:

jake lazaroff wants congestion pricing

@jlazaroff

9 months

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.

5

55

259

1

5

105

nanda

@nandafyi

2 years

This is such an awesome micro-interaction I tried my hand at recreating it using @radix_ui : There was a cool trick too to get that conjoined effect:

interesting-snyder-ttizkx - CodeSandbox

interesting-snyder-ttizkx by narendrasss using @popperjs/core, @radix-ui/colors, @radix-ui/react-slider, @stitches/react, react, react-dom, react-popper, react-scripts

codesandbox.io

Dmitry Belyaev

@blvdmitry

2 years

Each time I get tired of writing documents and preparing slide decks, I go back to this slider interaction I've implemented a few years back. Makes me happy dragging the knobs every single time 😅