Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

React Spring Basics Part 2

In the previous video you’ve learned what you can do with React Spring and in this video we’ll be building upon that foundation. You’ll learn how to interpolate different properties to improve transitions and make them look smoother.

Downloads

Become a pro to download code and videos

Comments

User avatar

Matt

over 3 years ago

Looks like the newer version of React Spring requires some changes, My first error was that ''Transition' is not exported from 'react-spring', which I fixed by importing renderprops, eg: import { Transition } from 'react-spring/renderprops';

The second error was that _children is not a function. Looks like you have to supply the Transition component with the 'items' prop, eg: <Transition items={on} from={{ opacity: 0, bg: '#82d8d8', height: '0px' }} enter={{ opacity: 1, bg: '#524763', height: '200px' }} leave={{ opacity: 0, bg: '#82d8d8', height: '0px' }} > {on => on && Header} Which is the primary means of detecting changes.

Want to join the conversation?

Become a Pro member today!