Submitted about 2 months ago

React, Spring, Bootstrap, TypeScript

#animation#bootstrap#react#typescript

Sergiy•1,120

@MrSeager

Preview site View code

This is a solution for...Advice generator app

HTML
CSS
JS
API

2junior

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I don't quite get how spring works

What specific areas of your project would you like help with?

const transitions = useTransition(adv, { 
  from: { opacity: 0, transform: 'translateY(-220px)' }, 
  enter: { opacity: 1, transform: 'translateY(0)' }, 
  leave: { opacity: 0, transform: 'translateY(220px)' }, 
  config: { tension: 220, friction: 24 }, 
  exitBeforeEnter: true, 
});

animation on leave should go down with this transform: 'translateY(220px)' but it's just ignored

Community feedback

markus•2,310

@markuslewinPosted about 2 months ago

Hi!

The translateY(0) of enter needs a unit:

const transitions = useTransition(adv, {
  from: { opacity: 0, transform: "translateY(-220px)" },
  enter: { opacity: 1, transform: "translateY(0px)" },
  leave: { opacity: 0, transform: "translateY(220px)" },
  config: { tension: 220, friction: 24 },
  exitBeforeEnter: true,
});

It seems like you can use x and y to avoid these types of interpolation quirks:

const transitions = useTransition(adv, {
  from: { opacity: 0, y: -220 },
  enter: { opacity: 1, y: 0 },
  leave: { opacity: 0, y: 220 },
  config: { tension: 220, friction: 24 },
  exitBeforeEnter: true,
});

https://github.com/pmndrs/react-spring/issues/2143

Marked as helpful

Sergiy•1,120

@MrSeagerPosted about 2 months ago

@markuslewin thx. I'll try

Sergiy•1,120

@MrSeagerPosted about 2 months ago

@markuslewin it worked. thx

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord