Skip to content

Instantly share code, notes, and snippets.

@JonathanDn

JonathanDn/facebook-micro-4.scss

Created March 3, 2019 07:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JonathanDn/5f8f77ffb107206fe2ac04c31c3e0a1d to your computer and use it in GitHub Desktop.
Save JonathanDn/5f8f77ffb107206fe2ac04c31c3e0a1d to your computer and use it in GitHub Desktop.
Download ZIP
How Facebook Designs Microinteractions for Feature Discovery article fourth gist - https://bit.ly/2EtfB6V
Raw
facebook-micro-4.scss
// Basic keyframes 4-star to octagon and back animation
$four-points-star: 42.5% 32.5%, 70% 0%, 67.5% 42.5%, 100% 70%, 57.5% 67.5%, 30% 100%, 32.5% 58.5%, 0% 30%;
$octagon: 30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%;
@keyframes fourStarToOcatgonAndBack {
0% { clip-path: polygon($four-points-star); }
50% { clip-path: polygon($octagon); }
100% { clip-path: polygon($four-points-star); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment