React-spring visualizer

What it does

Get the most out of your react-spring animations by visualizing your spring ease configuration.

The missing visualizer for your react-spring UI animations. Check scale, translate, rotate, opacity & more

I am a big fan of react-spring , a spring-physics based animation library. It has quickly become my go-to library for UI animation in React projects. However, as a newbie to spring-based animations, I've had a hard time visualizing which effect the settings would have. So, I made this visualizer in order to help me determine the correct spring config for my animations. I hope it is of some help to someone else. Imagine a fixed spring with a bob on one end, the mass value is the mass of the bob ( see image ). While not technically the same, in this instance you can think of it as the weight of the bob. The higher the mass, the longer it takes for the animation to come to a rest. Each spring…from react-spring-visualizer.com

• 
  Aspect2022 · aspect.app · ▲106

  Create react components visually

• 
  Spring2015 · github.com · ▲188

  iOS Animation Library in Swift

• 
  Product UI Animations by Awesomic2021 · awesomic.com · ▲236

  Animated graphics and icons for web and mobile app design

• TS
  The state of animation in React, introducing react-spring2018 · ▲5

  Most you you will probably be familiar with react-motion and Facebooks animated (react-natives default). Both are practically go-to solutions in their respective fields, but do leave a lot to be desired. Animated interpolates everything and is fast, but misses essential primitives and can be troublesome to use due to its imperative nature. React-motion is declarative but can't interpolate and performs slower. After switching between the two for about a year i've decided to pick up where the two have left off: So this is react-spring: https://github.com/drcmda/react-spring…

• 
  Sapling2021 · marketplace.visualstudio.com · ▲146

  A convenient way to traverse your React app

• 
  ReacType2019 · github.com · ▲91

  Prototyping Tool Exporting React / Typescript Applications

• 
  /dev/null▲486

  a social network for devs

  Dev tools · 3d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 28d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 26d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 23d ago · openbot.run

• 
  Talanoa▲346

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 21d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 28d ago · corespeed.io

• 
  MicroAcquire▲1,552

  A free & anonymous startup acquisition marketplace

  Commerce · 2020 · microacquire.com

• 
  YourStack▲1,251

  A new community for sharing the products you use and ❤️

  Life & fun · 2020 · yourstack.com

• 
  Become an Indie Hacker▲826

  The ultimate resource for starting profitable side projects

  Growth · 2020 · indiehackers.com

• IW
  I wrote a book for engineers that want to become engineering managers▲695

  Hey folks. Last year I was fortunate enough to sign a deal to write a book with my favorite technical publisher, The Pragmatic Bookshelf. When I started out as an Engineering Manager many years ago, I found that there wasn't a huge amount of material that specifically and practically helped me understand how to do my job. When you learn to program there's all of these amazing tutorials, examples and guides, but what was there for new managers? In response to this, a couple of years ago I started a blog over at https://www.theengineeringmanager.com which got a decent amount of…

  Work · 2020

• 
  Bannerbear▲652

  Auto-generate IG Stories, Pinterest Pins and more

  Growth · 2020 · bannerbear.com

• 
  byte▲604

  A new looping video app from the founder of Vine

  Growth · 2020