nguyentam19008

Cool Layout with Complex Chainable Animation

Based on this - https://dribbble.com/shots/2802024-Satellite-Website-Prototype

Based on addition of just 2 classes with JS (and simple hover) this demo features a lot of cool chaining animations, combined with good performance and sort-of easy-to-maintain scss.

!!! PLEASE BETTER CHECK IN FIREFOX AND READ WHY BELOW !!!

Important note - after some changes in Chrome, which happened somewhere around September, the performance of this demo drastically reduced. I did some optimizations with adding will-change to some things, but it's still laggy as hell, even on a good machine. Originally, when it was created in July, it was working perfectly fine (as it works right now in FF, just tested in 50.1.0 version).

nguyentam19008

<div class="example">
  <button id="b1">A basic message</button>
  <button id="b2">A title with a text under</button>
  <button id="b3">A success message!</button>
  <button id="b4">A warning message, with a function attached to the "Confirm"-button...</button>
  <button id="b5">... and by passing a parameter, you can execute something else for "Cancel".</button>
  <button id="b6">A message with a custom icon</button>
</div>