Recreating The Instagram Double-Tap with JavaScript ❤️

Written by daily-dev-tips | Published 2020/09/22
Tech Story Tags: javascript | instagram | ux | web-development | frontend | daily-dev-tips | css3 | animation | web-monetization

TLDR Recreating The Instagram Double-Tap with JavaScript. We will bind a double-click handler to our image show the heart animation plus the counter below the post. We only need 12 lines of JavaScript to recreate the famous Instagram double-tap to like effect. We make use of Flex to center the post, 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. And last we have our number of likes.via the TL;DR App

no story

Written by daily-dev-tips | https://daily-dev-tips.com I write daily dev tips to contribute to the development community!
Published by HackerNoon on 2020/09/22