Is there a way to animate popovers?

[JonCognioDigital]

I'd like to animate mine using transform: translateY() or something similar so that it quickly rises up into position and fades in.

Is there a suggested way to do this? Is it possible to use other animation libraries on the contents of the content={} prop? or is there a better way to do this?

[alexkatz]

I recommend using the popover in conjunction with whatever animation library you feel comfortable with.

I've had good results with react-spring. If I have time, I'll post some examples soon.

Animating in is pretty straightforward -- just kick the animation off when the popover appears the same way you would anywhere else in your app. I would refrain from animating the div container that react-tiny-popover creates, and instead focus on animating the content you have within it. You can set overflow on the popover container to visible if you anticipate the animation exceeding the bounds of the popover container.

Animating out is a little trickier. You have to wait for the animation to complete before closing the popover, as closing the popover will immediately remove it from the DOM altogether.

Most animation libraries have some sort of onAnimationEnd or onRest callback within which you can set the popover to closed. This way, your content will fade out, or fly off the screen, or whatever, and then invisibly be removed from the DOM.

Hope this helps.

[JonCognioDigital]

Thanks, I'll look into react spring. An example would be awesome!