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.
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.
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…
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…
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.
