Skip to content

Instantly share code, notes, and snippets.

View JonathanDn's full-sized avatar
💭
Building Reusable Vue Components

Yonatan Doron JonathanDn

💭
Building Reusable Vue Components
89 followers · 18 following
View GitHub Profile
@JonathanDn
JonathanDn / facebook-micro-3.scss
Last active March 3, 2019 09:16
How Facebook Designs Microinteractions for Feature Discovery article third gist - https://bit.ly/2EtfB6V
// Octagon - 8 equally spread corners
clip-path: polygon(
30% 0%,
70% 0%,
100% 30%,
100% 70%,
70% 100%,
30% 100%,
0% 70%,
0% 30%
@JonathanDn
JonathanDn / facebook-micro-2.scss
Last active March 3, 2019 09:12
How Facebook Designs Microinteractions for Feature Discovery article second gist - https://bit.ly/2EtfB6V
// A Four Cornered Star (8 points in total, 4 outter, 4 inner)
clip-path: polygon(
0 0,
100px 50px,
200px 0,
150px 100px,
200px 200px,
100px 150px,
0 200px,
50px 100px
@JonathanDn
JonathanDn / facebook-micro-1.scss
Last active March 3, 2019 09:12
How Facebook Designs Microinteractions for Feature Discovery article first gist - https://bit.ly/2EtfB6V
// A simple 8 points(coordinates x y) Square 200px by 200px
// with points equally spread along the corners and middle of each
// Square side (right model)
clip-path: polygon(
0 0,
100px 0,
200px 0,
200px 100px,
200px 200px,
100px 200px,
@JonathanDn
JonathanDn / medium_clap.html
Last active June 9, 2023 07:34
(moved to a repo https://github.com/JonathanDn/mediumclap ) Medium Clap Reproduction - My take on it by looking, researching and trial & error. Demo available --> https://jsfiddle.net/urft14zr/425/
<div class="canvas">
<div id="totalCounter" class="total-counter"></div>
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="clicker" class="click-counter">
<span class="counter"></span>
</div>
@JonathanDn
JonathanDn / meter.html
Last active September 7, 2019 06:40
Rotating Meter with solid Base - SCSS HTML - Fiddle: https://jsfiddle.net/84nftuh6/1/
<div class="clock">
<div class="meter"></div>
<div class="center"></div>
</div>
@JonathanDn
JonathanDn / clap-sonar.html
Created April 2, 2018 22:03
Clap Sonar - WIP - click counter, retriggering animations, chain animation effect - demo --> https://jsfiddle.net/urft14zr/220/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="clicker" class="click-counter">
<span class="counter"></span>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
@JonathanDn
JonathanDn / clap-sonar.html
Created March 28, 2018 06:17
SCSS - clap sonar with rotating multiple popping confeti effect outwards on click - demo --> https://jsfiddle.net/urft14zr/139/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
<div id="particles" class="particles-container">
<div class="triangle">
<div class="square"></div>
@JonathanDn
JonathanDn / clap-confeti.html
Last active March 27, 2018 10:32
SCSS - clap sonar with multiple popping confeti effect outwards on click - demo --> https://jsfiddle.net/urft14zr/106/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
<div id="particles" class="particles-container">
<div class="triangle">
<div class="square"></div>
@JonathanDn
JonathanDn / clap-sonar.html
Last active March 26, 2018 23:04
SCSS - clap button simple sonar hover effect - demo --> https://jsfiddle.net/urft14zr/42/
<div class="canvas">
<div id="clap" class="clap-container">
<i class="clap-icon fa fa-hand-paper-o"></i>
</div>
<div id="sonar-clap" class="clap-container-sonar"></div>
</div>
@JonathanDn
JonathanDn / sonar-wave-click.html
Last active March 24, 2018 20:05
SCSS - sonar waves effect and contrast shift on click - demo --> https://jsfiddle.net/zzLejgwu/118/
<div class="circle-container">
<div id="circle" class="circle">
<div id="icon" class="icon-container">
<div class="icon no-animation"></div>
</div>
<div class="pulsating-ring"></div>
<div class="pulsating-ring-two"></div>
<div class="pulsating-ring-three"></div>
</div>
</div>