Question

The reeder lightbox popup has an easing at the end.

I’m looking for a way to imitate that easing. How do I do it?

jQuery/css solution please.

http://reederapp.com/mac/screens

Answer 1

Sweet–looking effect!

It seems these are CSS transitions triggered via JS. The overlay is first instantly scaled to a size of 50%, then animated to 105% and afterwards animated back to 100%, both with an easing setting of ease-out.

This causes what’s known as the “80/20 effect”: By skipping the first 80% (or in this case 50%) of an animation initially, the animation appears to be more snappy and responsive.

---

Here are the code bits in question: (Copied from reederapp.com‘s source — I haven not written these!)

CSS (http://reederapp.com/mac/css/main.css)

#screen-overlay.animate {
    -webkit-transition: all 0.2s ease-out;  
}

JS (http://reederapp.com/mac/js/mac.js)

$overlay()
  .removeClass('animate')
  .css({opacity:0,'-webkit-transform':'scale(0.5)','background-color':'rgba(0,0,0,0)'})
  .show();

setTimeout(function() {
  $overlay().addClass('animate').css({'-webkit-transform':'scale(1.05)',opacity:1});
  setTimeout(function() {
    $overlay().css({'-webkit-transform':'scale(1)'});
    setTimeout(function() {
      $overlay().css({'background-color':'rgba(0,0,0,0.5)'})
    });
  },200);
},10);