Transition flashes for a ms before it's leaving

[J4v4Scr1pt]

Hey!

I've asked a question here before regarding this component I'm building and got awesome help :D!
I'm in the final stages on this but I can not understand why this thing is happening.

If you click the dragble button to display the div, it switches nicely to enter.
But when it leaves it first looks ok, then you can during a short ms see the red text "GET STARTED" and "CLOSE".

How does this happen? I probably missed something obvious :)

https://codesandbox.io/s/uyb9ho?file=/src/DraggableButton.jsx

[joshuaellis]

You're using wobbly config so there's a bounce on either side, you can see this when you open it clearly by the up and down movement of the modal, however, when it closes it wobbles at the end thus the opacity comes back slightly and then disappears.

[J4v4Scr1pt]

Ahh how stupid of me not thinking about that. To bad because I added it just because I liked the effect of the wobbly :D

Do you have any suggestion on how to have smillar effect without affecting the opacity?
Just play with the { mass: 1, tension: 180, friction: 12 } maybe?
Or just add some transform css or any other property?

Edit:
Trying to add this animation:
Amenista

But can't understand where transform-origin should go?

	const transitions = useTransition(open, {
		from: { opacity: 0, rotateX: -70, transformOrigin: "bottom" },
		enter: { opacity: 1, rotateX: 0, transformOrigin: "bottom" },
		leave: { opacity: 0, rotateX: 100, transformOrigin: "bottom" },
	});

Edit2: ok I can see that transform-origin work because it shows in devTools. But the animation is not the same.

[J4v4Scr1pt]

Hi again!

I have solved this using a different kind of animation, but there is one thing that I can't fix.

Everything inside the modal div that has display:flex; align-items: center; moves slightly up after the animation is done.
If I remove align-items: center; there is no problem, tried to remove wobbly config but still the same.
Any suggestions? :)

https://gyazo.com/83ea6fd8acce9cf4abd4093e5f14cd73