Make an Image POP-IN & POP-OUT with JavaScript, HTML, and CSS

A quick way to add style to your web design…animation.

Let’s start by setting the scale of our image to 0 in the CSS and capturing it in our JavaScript.

Image for post
Image for post

Now let’s create a function that “pops in” our image.
To do this we’ll manipulate CSS properties of the image using JavaScript.
We’ll set a transition duration of 0.2 seconds and we’ll scale up the image to 1.5 it’s original size.

Image for post
Image for post

The ‘translate(-50%, -50%)’ in our transform is just to make sure the image stays in the middle of the page.

We can test this function by attaching a ‘keyup’ event listener to our window
and calling the function…

Image for post
Image for post

Let’s make a more dynamic effect.
Shrink our image back down to a scale of 1…
After it has reached its scale of 1.5, we’ll just add a timeout set to 0.2 seconds or 200 milliseconds
We’ll also have this phase of the animation take 0.7 seconds

To finish our animation we’ll just create another function to “pop out” our image and change one value…

Image for post
Image for post

Instead of shrinking down to a scale of 1 in the timeout, we’ll shrink down to a scale of 0 and add that function to our listener.

If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

Create Images that Pop In & Out Using JavaScript/CSS

Written by

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store