Implementing animations with react-spring

In this video, we will use useSpring and useTransition to transform static UIs into animated UIs.

0:00 Introduction
0:43 Getting started with the Hooks API
1:03 Animating static UI with useSpring
3:30 Applying interpolate functions
5:15 Animating transitions with useTransitions

Codesandbox links:

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

[acarvey]

Great video, looking very forward to using these tools (:

[nightmoves]

Can you show the 'slides' array used in the transistions demo also?

[suzanabenedettisardinha]

Why there are class attributes? Shouldn't you use className?

[KalleZz_]

Since the images are unmounted by transition(?), wouldn't it be a problem if you have slow internet? It only loads the image once you mount the slide.

[auddy]

Nice video, thanks. What color theme you are using?

[codebook]

Sir we want full playlist on this course

[devjejo]

Nice vid! How would we incorporate this on scroll? Say you scroll in a specific section then use react-spring. Thanks

[themidnightspark]

Does react spring work with any UI library? For example, can I use it with semantic Ui's segment? eg: <animated.Segment/>?