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

Basic Transitions With React Spring

In this video, we’ll address animations using React Spring. I’ll be talking about this library in the simplest way possible. You’ll also learn how to do a basic transition using the Transition Component instead of the Spring Component (and why use one and not the other).

Downloads

Become a pro to download code and videos

Comments

Christoffer

over 2 years ago

An alternative is to downgrade react-spring to major version 5 in the package.json file like so: "react-spring": "^5.0.0",

Michael Martinez

about 3 years ago [edited]

I've found that the working code needs to look like the following:

import { Transition } from 'react-spring/renderprops';

...

<Transition
  items={on}
  unique
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}
>
  {show => styles => show && (
    <div style={{ ...styles }}>
      Think of the Children!!
    </div>
  )}
</Transition>

Michael Martinez

about 3 years ago [edited]

I've found that the working code needs to look like the following:

import { Transition } from 'react-spring/renderprops';
<Transition
  items={on}
  unique
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}
>
  {show => styles => show && (
      <div style={{ ...styles }}>
          Think of the Children!!
      </div>
  )}
</Transition>

SRB

about 3 years ago

Had the same issue and solved it!! Thanks!!!

Leanne

about 3 years ago

Transition now needs to be imported as follows:

import { Transition } from 'react-spring/renderprops';

User avatar

Alan

about 3 years ago

I also ran into this and it wasn't until I exited Full Screen mode in the video that I realized there were comments below that solved my issues. Thanks!

Dan

over 3 years ago

Just ran into this same issue, thanks for the help! I would assume Scott covers all the updates in the new course on animating React.

Oskar

over 3 years ago [edited]

React-spring is noticeably changing. Some of the information in the video is outdated, so I had to support myself with react-spring's reference - but the course is still good foundation.

For other learners:

For now (v8.0.20) Transition part has to look more like:

        <Transition
            items={on}
            from={{ opacity: 0 }}
            enter={{ opacity: 1 }}
            leave={{ opacity: 0 }}
        >
            {on => on && Header }
       </Transition>

Now it'll work, but smushing button generates more children. There is simple way to prevent that. Set prop unique to true:

        <Transition
            items={on}
            unique={true}
            from={{ opacity: 0 }}
            enter={{ opacity: 1 }}
            leave={{ opacity: 0 }}
        >
            {on => on && Header }
       </Transition>

Want to join the conversation?

Become a Pro member today!