How to reset automatically styles on animation end

[jordisantamaria]

Hello, I'm new with the library, so I don't know if its possible, but I really would like, my styles instantly reset to the values of before animation started, after animation end.

I'm reseting it, deleting the component when called onRest, but it feels so slow, so the end animation styles are staying for a second before its being deleted. Here you can see the result:

https://gyazo.com/b5662c1a7362b1d20e96c4f7ee916dc0

I will try to do it will other library if not, but I would like to know if Its possible to be done with react motion, my styles just get reseted automatically when animation end.

Here the code:

const onAnimationEnd = () => {
    setClicked(false);
  };

<Button width={'120px'} variant={'success'} onMouseDown={handleClick} ref={$button}>
            Aceptar
            {clicked && (
              <Motion
                defaultStyle={{x: 0}}
                style={{x: spring(scaleAnimation, {stiffness: 150, damping: 20})}}
                onRest={onAnimationEnd}
              >
                {(value) => (
                  <div
                    style={{
                      transform: `scale(${value.x})`,
                      position: 'absolute',
                      left: `${animationOrigin.x}px`,
                      top: `${animationOrigin.y}px`,
                      width: '20px',
                      height: '20px',
                      borderRadius: '50%',
                      backgroundColor: 'rgba(255,255,255,0.2)',
                    }}
                  />
                )}
              </Motion>
            )}
          </Button>