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

Animating Modal

Using the skills we talked about in the previous video, you’ll be learning how to animate a Modal. You’ll learn how to use multiple transitions by adding fade in and fade out animations that work independently from previous animations.

Downloads

Become a pro to download code and videos

Comments

User avatar

Alan

about 3 years ago

With the recent changes to react-spring (as noted in the comments on video #14 of this series), the Transition demonstrated at time 2:42, should look like this:

    <Transition
      items={on}
      unique={true}
      from={{ opacity: 0 }}
      enter={{ opacity: 1 }}
      leave={{ opacity: 0 }}
    >
    {on => on && 
      (styles => (
        <ModalWrapper style={{ ...styles }}>
          <ModalCard>
            <CloseButton onClick={toggle}>
              <Icon name="close" />
            </CloseButton>
            <div>{children}</div>
          </ModalCard>
          <Background onClick={toggle} />
        </ModalWrapper>
        )
      )}
    </Transition>

Want to join the conversation?

Become a Pro member today!