Double-click to like Instagram effect in JavaScript ❤️

Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

Dec 22, 20223 min read

Vendure community and more

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

Dec 21, 20222 min read

Deploying Vendure

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

Dec 20, 20223 min read

Vendure - Overwriting email templates

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Dec 19, 20222 min read

Customizing vendure

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Dec 18, 20224 min read

Daily Dev Tips

887 posts

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

HTML Structure

As for our HTML, we are make us of our SVG sprites. Then we create our post div, with the hearth SVG in it. Under that we render the actual instagram post. And last we have our number of likes.

As you can see, we are using singer elements, so I didn't bother to add classes for this example.

CSS Structure

.post { margin: auto; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; } .post img { width: 400px; cursor: pointer; } .post .icon { position: absolute; display: inline-block; width: 128px; opacity: 0; fill: red; } .post .icon.like { animation: 2s like-heart-animation ease-in-out forwards; } .post p { align-self: baseline; margin-top: 10px; }

We make use of Flex to center the post. Next, we make the icon (heart) absolute and give it an opacity of 0, so it's not visible on load.

Then we say if this icon also has the class like add the animation like-heart-animation.

This animation looks like this, and it's exactly the animation as how Instagram does it. They scale it up and to the end scale it a little down to give it a bounce effect.

@keyframes like-heart-animation { 0%, to { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } 15% { opacity: 0.9; -webkit-transform: scale(1.2); transform: scale(1.2); } 30% { -webkit-transform: scale(0.95); transform: scale(0.95); } 45%, 80% { opacity: 0.9; -webkit-transform: scale(1); transform: scale(1); } }

JavaScript Instagram Like

For our actual effect to add place, we need to get the like class added to our icon svg.

const img = document.querySelector("img"); const icon = document.querySelector(".icon"); const countEl = document.querySelector("span"); let count = 0; img.addEventListener("dblclick", () => { count++; icon.classList.add("like"); countEl.innerHTML = count; setTimeout(() => { icon.classList.remove("like"); }, 1200); });

We add an event listener called dblclick (double click). If that happens, we tell our counter to increase by one. Then we add the like class to our icon and update the number of likes. After 1200 milliseconds, we remove the like class again.

That's it! We now have the following Instagram like effect in Codepen:

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Command Palette

Comments (3)

More from this blog

HTML Structure

CSS Structure

JavaScript Instagram Like

Thank you for reading, and let's connect!