Printer Pull Down To Refresh

HTML

            
              <div class="demo">
  <div class="demo__header">
    Pull Down Content Part
  </div>
  <div class="demo__cont">
    <div class="demo__line"></div>
    <div class="printer">
      <div class="printer__main-part printer__top"></div>
      <div class="printer__main-part printer__btm">
        <div class="printer__circle"></div>
        <div class="printer__yellow">
          <div class="printer__yellow-inner">
            <div class="printer__yellow-part"></div>
            <div class="printer__yellow-part"></div>
            <div class="printer__item-cont"></div>
            <div class="printer__head"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="demo__items">
      <div class="item">
        <div class="item__top">
          <h2 class="item__heading">Payment receipt</h2>
          <p class="item__amount">$ 666</p>
          <p class="item__info">Something whatever</p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="item__img" />
        </div>
        <div class="item__btm">
          <p class="item__details">View details</p>
          <p class="item__when">15 min</p>
        </div>
      </div>
      <div class="item">
        <div class="item__top">
          <h2 class="item__heading">Payment receipt</h2>
          <p class="item__amount">$ 666</p>
          <p class="item__info">Something whatever</p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="item__img" />
        </div>
        <div class="item__btm">
          <p class="item__details">View details</p>
          <p class="item__when">15 min</p>
        </div>
      </div>
      <div class="item">
        <div class="item__top">
          <h2 class="item__heading">Payment receipt</h2>
          <p class="item__amount">$ 666</p>
          <p class="item__info">Something whatever</p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="item__img" />
        </div>
        <div class="item__btm">
          <p class="item__details">View details</p>
          <p class="item__when">15 min</p>
        </div>
      </div>
      <div class="item">
        <div class="item__top">
          <h2 class="item__heading">Payment receipt</h2>
          <p class="item__amount">$ 666</p>
          <p class="item__info">Something whatever</p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="item__img" />
        </div>
        <div class="item__btm">
          <p class="item__details">View details</p>
          <p class="item__when">15 min</p>
        </div>
      </div>
      <div class="item">
        <div class="item__top">
          <h2 class="item__heading">Payment receipt</h2>
          <p class="item__amount">$ 666</p>
          <p class="item__info">Something whatever</p>
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="item__img" />
        </div>
        <div class="item__btm">
          <p class="item__details">View details</p>
          <p class="item__when">15 min</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- instead of template engine -->

<div class="item item--in-printer item--boilerplate">
  <div class="item__side item__front">
    <div class="item__top">
      <h2 class="item__heading"></h2>
      <a href="#" class="item__amountLink" target="_blank">
        <p class="item__amount"></p>
      </a>
      <p class="item__info"></p>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="item__img" />
    </div>
    <div class="item__btm">
      <p class="item__details"></p>
      <p class="item__when"></p>
    </div>
  </div>
  <div class="item__side item__back">
    <div class="item__top">
      <div class="item__heading"></div>
      <div class="item__amount"></div>
      <div class="item__info"></div>
      <div class="item__img"></div>
    </div>
    <div class="item__btm">
      <div class="item__details"></div>
      <div class="item__when"></div>
    </div>
  </div>
</div>

CSS

            
              *, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  background: #ffce4c;
}

$demoW: 500px;
$demoH: 800px;

$headerH: 90px;

$lineHeight: 3px;

$printerW: 290px;
$printerTopH: 15px;
$printerBtmH: 50px;
$printerMrgTop: -90px;
$printerHeadH: 10px;

$contPadTop: 5px;

$itemsH: $demoH - $headerH - $contPadTop;

$itemW: 450px;
$itemH: 210px;
$itemTopH: 150px;
$itemBtmH: $itemH - $itemTopH;
$itemMrg: 20px;
$itemSmallW: 150px;
$itemSmallScale: $itemSmallW / $itemW;
$itemSmallH: $itemH * $itemSmallScale;
$itemSmallStartX: (1 - $itemSmallScale) / 2 * $itemH * -1;

$maxDragY: 150px;
$maxPrinterY: 90px;
$printStep1AT: 0.3s;
$printStep2Delay: $printStep1AT + 0.1s;
$printStep2AT: 1.8s;
$printStep3Delay: $printStep2Delay + $printStep2AT;
$printStep3AT: 0.55s;

$printerHeadReps: 3;

@mixin printing {
  .demo.s--printing & {
    @content;
  }
}

@mixin printing-step-3 {
  .demo.s--printing-step-3 & {
    @content;
  }
}

.demo {
  position: relative;
  width: $demoW;
  height: $demoH;
  margin: 70px auto;
  border-radius: 10px;
  background-color: #5b399e;
  box-shadow: 0 0 5px 5px rgba(0,0,0,0.2);
  perspective: 1000px;

  &__header {
    position: relative;
    height: $headerH;
    text-align: center;
    font-size: 30px;
    line-height: $headerH + 5px;
    color: #fff;
  }

  &__cont {
    overflow: hidden;
    position: relative;
    padding-top: $contPadTop;
    user-select: none;
  }

  &__line {
    z-index: 2;
    position: absolute;
    left: 1px;
    top: 0;
    width: $demoW - 2px;
    height: $lineHeight;
    background: #ffbd00;
    transform: scaleX(0);

    @include printing {
      transition: transform $printStep1AT;
      transform: scaleX(1) !important;
    }
    
    @include printing-step-3 {
      transition: transform $printStep3AT/2;
      transform: scaleX(0) !important;
    }

    .demo.s--reset & {
      transition: transform $printStep1AT;
      transform: scaleX(0) !important;
    }
  }

  &__items {
    overflow: hidden;
    z-index: 3;
    position: relative;
    height: $itemsH;
    cursor: grab;

    @include printing {
      transition: transform $printStep1AT;
      transform: translate3d(0,$maxDragY,0) !important;
    }
    
    @include printing-step-3 {
      transition: padding $printStep3AT*0.6 $printStep3AT*0.4 cubic-bezier(.56,.33,.32,1.45);
      padding-top: 75px;
    }

    .demo.s--reset & {
      transition: transform $printStep1AT;
      transform: translate3d(0,0,0) !important;
    }
  }
}

.printer {
  position: absolute;
  left: 50%;
  top: $lineHeight;
  width: $printerW;
  margin-left: $printerW/-2;
  margin-top: $printerMrgTop;
  transform: translate3d(0,0,0);

  @include printing {
    transition: transform $printStep1AT;
    transform: translate3d(0,$maxPrinterY,0) !important;
  }
  
  @include printing-step-3 {
    transition: transform $printStep3AT/2;
    transform: translate3d(0,0,0) !important;
  }

  .demo.s--reset & {
    transition: transform $printStep1AT;
    transform: translate3d(0,0,0) !important;
  }

  &__main-part {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  &__top {
    z-index: 1;
    height: $printerTopH;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background: #5f45ac;
  }

  &__btm {
    height: $printerBtmH;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #4e2f96;
    box-shadow: 0 0 3px 3px rgba(0,0,0,0.25);
  }

  &__circle {
    position: absolute;
    right: 32px;
    bottom: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #edab26;
  }

  &__yellow {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 25px;
    width: 170px;
    height: 100px;
    margin-left: -85px;

    &-inner {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 38px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      background-color: #feba2a;
    }

    &-part {
      position: absolute;
      top: 100%;
      width: 78px;
      height: 8px;
      background-color: inherit;

      &:after {
        content: "";
        position: absolute;
        top: 100%;
        width: 40px;
        height: 16px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: inherit;
      }

      &:nth-child(1) {
        left: 0;
        border-bottom-right-radius: 4px;

        &:after {
          left: 0;
        }
      }

      &:nth-child(2) {
        right: 0;
        border-bottom-left-radius: 4px;

        &:after {
          right: 0;
        }
      }
    }
  }

  &__head {
    position: absolute;
    left: 10px;
    top: 0;
    width: 20px;
    height: $printerHeadH;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #e73388;
    
    @include printing {
      animation: printerHeadAnimation $printStep2AT/($printerHeadReps + 1) $printStep2Delay $printerHeadReps;
    }
  }
  
  &__item-cont {
    position: relative;
    height: 100%;
  }
}

.item {
  position: relative;
  width: $itemW;
  height: $itemH;
  margin: 0 auto $itemMrg;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,0.25);
  background: #fff;
  transform-style: preserve-3d;

  &--in-printer {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: $itemW/-2;
    margin-top: $itemSmallStartX + $itemSmallH * -1;
    transform: rotateX(-180deg) scale($itemSmallScale);
    
    @include printing {
      transition: margin-top $printStep2AT $printStep2Delay ease-out;
      margin-top: $itemSmallStartX + $printerHeadH + 5px;
    }
    
    @include printing-step-3 {
      display: none;
    }
  }
  
  &--boilerplate {
    display: none;
  }
  
  &.s--cloned {
    position: absolute;
    margin-left: (1 - $itemSmallScale) / 2 * $itemW * -1;
    margin-top: $itemSmallStartX;
    transform: rotateX(-180deg) scale($itemSmallScale);
    
    @include printing-step-3 {
      transition: transform $printStep3AT cubic-bezier(.67,.28,.39,1.22);
      transform: rotateX(0) scale(1) translateY(30px);
    }
  }
  
  &__side {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    backface-visibility: hidden;
  }
  
  &__front {
    z-index: 2;
  }
  
  &__top {
    position: relative;
    height: $itemTopH;
    padding: 25px 30px 10px;
  }
  
  &__heading {
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    color: darken(#d7d7d7, 10%);
  }
  
  &__amount {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
  }
  
  &__info {
    max-width: 340px;
    font-size: 16px;
    line-height: 1.5;
  }
  
  &__img {
    position: absolute;
    right: 30px;
    top: 60px;
    width: 70px;
    height: 70px;
  }
  
  &__btm {
    $borderW: 2px;
    
    position: relative;
    height: $itemBtmH;
    border-top: $borderW solid darken(#f7f7f7, 10%);
    line-height: $itemBtmH - $borderW;
    
    p {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding-top: $borderW;
    }
  }
  
  &__details {
    padding-left: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #9589b1;
  }
  
  &__when {
    padding-right: 20px;
    text-align: right;
    font-size: 14px;
    color: darken(#e5e5e5, 10%);
  }
  
  &__back {
    transform: rotateX(180deg) scaleY(-1);
    
    .item__heading {
      height: 18px;
      width: 90px;
      background: lighten(#d7d7d7, 10%);
    }
    
    .item__amount {
      width: 60px;
      height: 30px;
      background: #cfcfcf;
    }
    
    .item__info {
      width: 160px;
      height: 20px;
      background: #cfcfcf;
    }
    
    .item__img {
      background-color: orange;
      border-radius: 50%;
    }
    
    .item__details {
      position: absolute;
      left: 30px;
      top: 20px;
      width: 80px;
      height: 20px;
      background: lighten(#9589b1, 10%);
    }
    
    .item__when {
      position: absolute;
      right: 20px;
      top: 22px;
      width: 50px;
      height: 16px;
      background: #e5e5e5;
    }
  }
}

@keyframes printerHeadAnimation {
  50% {
    transform: translateX(60px);
  }
}

JS

            
              $(document).ready(function() {

  var $demo = $('.demo');
  var $items = $('.demo__items');
  var $line = $('.demo__line');
  var $printer = $('.printer');
  var $printerItemCont = $('.printer__item-cont');

  var maxDragY = 150;
  var minDragY = 60;
  var printerInitY = -90;
  var dragResistance = 0.6;
  var deltaY = 0;
  var printing = false;

  var printStep1AT = 0.3;
  var printStep2Delay = printStep1AT + 0.1;
  var printStep2AT = 1.8;
  var printStep3Delay = printStep2Delay + printStep2AT;
  var printStep3AT = 0.55;
  var printFullAT = printStep3Delay + printStep3AT;

  var itemsInfo = [
    {
      heading: 'My Twitter',
      amount: '@NikolayTalanov',
      amountLink: 'https://twitter.com/NikolayTalanov',
      info: 'Follow me on Twitter!',
      img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/twitter big icon.png',
      details: 'How is your day?',
      when: 'Just now',
      imgBackColor: '#1DA1F2'
    },
    {
      heading: 'Dribbble Shot',
      amount: 'Shot by Saptarshi Prakash',
      amountLink: 'https://dribbble.com/shots/3031884-Pull-to-Refresh-Printer',
      info: 'Thanks to this guy for cool gif!',
      img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/dribble big icon.png',
      details: 'Hi!',
      when: 'It\'s been a while',
      imgBackColor: '#ea4c89'
    },
    {
      heading: 'Other demos',
      amount: 'My codepen',
      amountLink: 'https://codepen.io/suez/',
      info: 'Check out my other demos',
      img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/codepen big icon.png',
      details: 'Hola',
      when: '666 min',
      imgBackColor: '#000'
    }
  ];
  
  var itemCounter = 0;
  var $itemBoilerplate = $('.item--boilerplate');

  function generateNewItem() {
    var $item = $itemBoilerplate.clone();
    var $itemFront = $('.item__front', $item);
    var data = itemsInfo[itemCounter];
    itemCounter++;
    if (itemCounter > 2) itemCounter = 0;
    
    $item.removeClass('item--boilerplate');
    
    Object.keys(data).forEach(function(prop) {
      var $el = $('.item__' + prop, $itemFront);
      var val = data[prop];
      
      if (prop === 'imgBackColor') return;
      if (prop === 'img') {
        $el.attr('src', val);
      } else if (prop === 'amountLink') {
        $el.attr('href', val);
      } else {
        $el.text(val);
      }
    });
    
    $('.item__back .item__img', $item).css('background', data.imgBackColor);
    
    return $item;
  };

  function insertNewItem() {
    var $newItem = generateNewItem();

    $printerItemCont.empty();
    $printerItemCont.append($newItem);
  };
  
  insertNewItem();

  function cloneAndPlacePrintedItem() {
    var $printedItem = $('.item--in-printer');
    var $clone = $printedItem.clone();
    var itemOffsets = $printedItem.offset();
    var demoOffsets = $demo.offset();
    var left = itemOffsets.left - demoOffsets.left;
    var top = itemOffsets.top - demoOffsets.top;

    $clone.removeClass('item--in-printer').addClass('s--cloned');
    $clone.css({left: left, top: top});

    $demo.append($clone);

    setTimeout(function() {
      var $finalClone = $clone.clone();
      $finalClone.attr('style', '');
      $finalClone.removeClass('s--cloned');

      $items.prepend($finalClone);
      insertNewItem();
      
      setTimeout(function() {
        $clone.remove();
      }, 50);
    }, printStep3AT * 1000);
  };

  function runPrintAnimation() {
    $demo.addClass('s--printing');

    setTimeout(function() {
      cloneAndPlacePrintedItem();
      $demo.css('top');
      $demo.addClass('s--printing-step-3');
    }, printStep3Delay * 1000);
  };

  $(document).on('mousedown touchstart', '.demo__items', function(e) {
    if (printing) return;
    console.log('click touch');
    var startY = e.pageY || e.originalEvent.touches[0].pageY;

    $items.addClass('s--no-select');

    $(document).on('mousemove touchmove', function(e) {
      e.preventDefault();
      var y = e.pageY || e.originalEvent.touches[0].pageY;
      deltaY = (y - startY) * dragResistance;

      if (deltaY < 0) deltaY = 0;
      if (deltaY > maxDragY) deltaY = maxDragY;

      var progress = deltaY / maxDragY;
      var printerY = printerInitY * progress * -1;

      $items.css('transform', 'translate3d(0,'+ deltaY +'px,0)');
      $line.css('transform', 'scaleX('+ Math.sqrt(progress) +')');
      $printer.css('transform', 'translate3d(0,'+ printerY +'px,0)');
    });

    $(document).on('mouseup touchend', function() {
      $(document).off('mousemove touchmove mouseup touchend');
      $items.removeClass('s--no-select');
      if (!deltaY) return;

      printing = true;
      var _printAT = printFullAT;

      if (deltaY >= minDragY) {
        runPrintAnimation();
      } else {
        $demo.addClass('s--reset');
        _printAT = printStep1AT;
      }

      setTimeout(function() {
        $demo.removeClass('s--printing s--printing-step-3 s--reset');
        $items.attr('style', '');
        $line.attr('style', '');
        $printer.attr('style', '');

        printing = false;
        deltaY = 0;
      }, _printAT * 1000);
    });
  });

});

999px

Loading ..................

Printer Pull Down To Refresh

Insecure Resource

HTML

CSS

JS

Console

Pen Settings

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript Preprocessor

About JavaScript Preprocessors

Add script as a module

About ES6 Modules

Add External Scripts/Pens

About External Resources

Code Indentation

Save Automatically?

Auto-Updating Preview

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions