15 Impressive Pop-Up Animation Effects from CodePen

Getting inspired is critical to any creative. With this overwhelming amount of information around us, unfortunately, it takes lots of time and effort to root out all these pearls and gems that you can get inspiration from

3D movement effect

A 3D message made with CSS3 + jQuery that follows user’s mouse movements.

Click and break it

A pop-up window that breaks into pieces once clicked.

Blurred background

This one blurs the background to make website visitors more focused on it.

Left bottom corner

A pop-up window that nicely appears in the left bottom corner once you scroll down.

Material Design

If you are a fan of Material Design, this pop-up comes with a fade-in animation in the Material Design style.

Linear pop-up

A minimalist yet charming entrance effect on a hover.

“Flappy” buttons

A distinguishable pop-up with a beautiful entrance effect and “flappy” buttons.

Animated dialog box

Yet another pop-up box with a distinguishable transition animation.

SVG & jQuery pop-up animation

Hover the dot and see how nicely the border of the box is being drawn.

Modal Animation Physics

A transition animation inspired by the menu pop-ups in Super Mario 3D.

Pop-up question form

A pop-up question form that smoothly appears once clicked on a button.

Cartoon pop-up

A speech bubble pop-up that fades in once hovered the circle.

Welcome pop-up

A smart welcome pop-up with a nice animation effect.

Overlay pop-up

This one comes with a smooth full screen overlay effect.

Simple confirmation pop-up

Yet another pop-up with a full screen overlay effect and nice transition animation.