React — Spring

My final project at the Flatiron School is build in React.js. React is a javascript framework that comes with a lot of packages and support. No need to reinvent the wheel. There is an NPM package for many of the component features anyone would want to implement in their web application.

The toolbox is vast and complex. With React, I can achieve a lot of effects and functions that would be a project of its own. With all this power at my fingertips though, my project quickly grew in complexity and the learning curve was steep. So all this power, did not simplify my life.

The package that is at the forefront of my project is React-Spring, used in conjunction with React-Gesture. These two work hand in hand to create beautifully fluid animations and user interactions in my application. I built a tarot card reader to practice and explore the power of these two packages.

React-Spring is responsible for the animating. It requires hooks to keep track of the state of the objects you want to animate. Right there was a lot of learning for me as hook was not covered in the coursework I was taking. I really wanted the cool animations though so I dove right into the documentation. Here are some things that I learned through trial and error and probably are in the documentation but at the same time easily missed.

1. When you set the useSpring hook, there is a default configuration for the spring. You can set your own configuration in the hook by setting the object as such, config: {mass: 2, tension: 100, friction: 50}. The default spring configuration is, config: {mass: 1, tension: 170, friction: 26}. Tweaking this config object changes the “speed” and springiness of the animation. You probably need a custom configuration to get the animation to behave just the way you want.
2. Springs can be used to interpolate almost anything. Any CSS and HTML attributes that you can set, useSpring can be used to interpolate and animate it. You can animate a resizing by interpolating over the css property border, you can interpolate colors and make things flash, etc.You can interpolate pretty much any CSS property at the same time. The options are vast and a bit overwhelming.
3. If you are looking at the example content from React-Spring that also use React-Gesture, take note of the versions those examples are built on. There have been drastic changes between versions and the syntax has changed in subtle ways that render the examples obsolete.

With React-Spring I managed to implement animations beyond my imagination and capability. It is a powerful package to dive into and I think will be a standard of web applications in the near future. Take a look at my animations and see what it can do.

https://github.com/jratana1/react-tarot