Today we are going to recreate the famous Instagram double-tap to like effect! And the surprise, we only need 12 lines of JavaScript! For this effect, we will bind a double-click handler to our image show the heart animation plus the counter below the post. This is how it is going to look: HTML Structure 0 likes < = = = = = > svg aria-hidden "true" style "position: absolute; width: 0; height: 0; overflow: hidden;" version "1.1" xmlns "http://www.w3.org/2000/svg" xmlns:xlink "http://www.w3.org/1999/xlink" < > defs < = = > symbol id "icon-heart" viewBox "0 0 32 32" < = > path d "M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z" </ > path </ > symbol </ > defs </ > svg < = > div class "post" < = > svg class "icon icon-heart" < = > use xlink:href "#icon-heart" </ > use </ > svg < = /> img src "https://instagram.fcpt4-1.fna.fbcdn.net/v/t51.2885-15/sh0.08/e35/s640x640/105986995_880679399008682_4786248831928918923_n.jpg?_nc_ht=instagram.fcpt4-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=ZI2jfIEB-tUAX8MMD58&oh=4cc88009309dbc5b223b8334408ac213&oe=5F78F3A2" < > p < > span </ > span </ > p </ > div As for our HTML, we are make us of our . 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. SVG sprites As you can see, we are using singer elements, so I didn't bother to add classes for this example. CSS Structure { : auto; : relative; : flex; : center; : center; : column;
} { : ; : pointer;
} { : absolute; : inline-block; : ; : ; : red;
} { : like-heart-animation ease-in-out forwards;
} { : baseline; : ;
} .post margin position display align-items justify-content flex-direction .post img width 400px cursor .post .icon position display width 128px opacity 0 fill .post .icon .like animation 2s .post p align-self margin-top 10px We make use of the post. Next, we make the icon (heart) absolute and give it an opacity of 0, so it's not visible on load. Flex to center 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. @ like-heart-animation {
  0%, { : ; : (0); : (0);
  }
  15% { : ; : (1.2); : (1.2);
  }
  30% { : (0.95); : (0.95);
  }
  45%,
  80% { : ; : (1); : (1);
  }
} keyframes to opacity 0 -webkit-transform scale transform scale opacity 0.9 -webkit-transform scale transform scale -webkit-transform scale transform scale opacity 0.9 -webkit-transform scale transform scale JavaScript Instagram Like For our actual effect to add place, we need to get the like class added to our icon svg. img = .querySelector( ); icon = .querySelector( ); countEl = .querySelector( ); count = ;
img.addEventListener( , () => {
  count++;
  icon.classList.add( );
  countEl.innerHTML = count;
  setTimeout( {
    icon.classList.remove( );
  }, );
}); const document "img" const document ".icon" const document "span" let 0 "dblclick" "like" => () "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 or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/double-click-to-like-instagram-effect-in-javascript-%E2%9D%A4%EF%B8%8F/

CodePen

Facebook

Instagram

Twitter

Webmentions: Why I Made the Switch from Comments 

These Full-stack Projects Are a Must for Your 2020 Portfolio 🤯

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Recreating The Instagram Double-Tap with JavaScript ❤️

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Write A Letter Your Future Self Will Thank You For

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Write A Letter Your Future Self Will Thank You For

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps