cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="app">
  <div class="menu">
    <svg class="bg" height="100%" viewBox="0 0 100 100">
      <path d="M0,0C0,0,0,100,0,100C0,100,0,100,0,100C0,60,0,0,0,0C0,0,0,0,0,0"
    fill="#f4f4f4" />
    </svg>

    <div class="menu-data">
      <div class="people-list">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="search-box">
        <input type="search" class="search-field" placeholder="Search"/>
      </div>
    </div>
  </div>

  <div class="main-content">
    <div class="info">
      <p>A demo of mo.js Library.</p>
      <p>By - Prateek Jadhwani</p>
      <p>Swipe to the right to open menu</p>
      <p>Needs Touch Input</p>
    </div>
  </div>
</div>
            
          
!
            
              body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #525F81;
}

.app {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: #95B3FE;
  
    .menu {
        position:fixed;
        height: 100%;
        width: auto;
        left: 0;
        top: 0;
        background: transparent;
        z-index: 999;
      
        .bg{
            position:absolute;
            left:0;
        }
      
        .search-box {
            background: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50px;
            width: 100%;
          
            input[type=search]{
                background: transparent;
                outline: none;
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                font-size: 34;
                border: none;
            }
        }
      
        .menu-data {
            opacity: 0;
            overflow: hidden;
            height: 100%;
            background: #f4f4f4;
          
            .people-list ul{
                padding: 0;
                margin-bottom: 50px;
                overflow-y: scroll;
                overflow-x: hidden;
                height: 100%;
              
                li {
                    padding: 5px 10px;
                    height: 50px;
                    
                    &::before {
                        display: block;
                        content: ' ';
                        height: 50px;
                        width: 50px;
                        top: 0px;
                        background: #D6D5D5;
                        position: relative;
                        border-radius: 50%;
                    }
                  
                    &::after {
                        display: inline-block;
                        content: 'Stuff is Stuff';
                        height: 50px;
                        width: 100px;
                        top: -50px;
                        left: 50px;
                        padding: 15px;
                        position: relative;
                        color: #D6D5D5;
                    }
                }
            }
        }
    }
  
    .open .menu-data {
        opacity: 1;
        transition: 1.2s opacity;
    }
  
    .main-content {
        position:fixed;
        top:0;
        left:0;
        z-index: 0;
        height: 100%;
        width: 100%;
        overflow: auto;
        
        .info {
            background:#000;
            color:#fff;
            font-size:14px;
            padding:10%;
            margin: 10%;
        }
    }
}
            
          
!
            
              var wH, wW, mouseX, mouseY, decX, decY,
  elasticPath = elasticPath(),
  bgPath = document.querySelector('.bg path'),
  pathOrigin = bgPath.getAttribute('d'),
  isDragging = false,
  startX = 0,
  menu = document.querySelector('.menu');

window.onload = function() {

  wH = window.innerHeight;
  wW = window.innerWidth;

  window.addEventListener('touchmove', function(event) {
    var touchEvent = event.changedTouches[0];
    if (isDragging) {
      // update variables for calculation if 
      // mouse is dragging
      mouseX = touchEvent.pageX - startX;
      mouseY = touchEvent.pageY;
      decX = parseInt(mouseX / wW * 100);
      decY = parseInt(mouseY / wH * 100);
    }
    if (decX < -20) {
      closeMenu();
    } else {
      transform();
    }
  });

  window.addEventListener('touchstart', function(event) {
    var touchEvent = event.changedTouches[0];
    isDragging = true;
    startX = touchEvent.clientX;
  });

  window.addEventListener('touchend', function(event) {
    var touchEvent = event.changedTouches[0];
    isDragging = false;
    mouseY = touchEvent.pageY;
    decY = parseInt(mouseY / wH * 100);
    if (decX < 50 && !document.querySelector('.menu').classList.contains('open')) {
      closeMenu();
    }
  });

};

function transform() {
  // is menu closed?
  if (!document.querySelector('.menu').classList.contains('open')) {
    if (isDragging) {

      // Change path as per mouse drag
      newPath = 'M0,0C0,0,0,100,0,100C0,100,0,100,0,100C' +
        decX + ',' + (decY - 20) + ',' + decX + ',' + (decY + 20) +
        ',0 0C0,0,0,0,0,0C0,0,0,0,0,0';

      // Update path in SVG
      bgPath.setAttribute('d', newPath);

      // Has dragging reached the end?
      if (decX > 50) {

        // Make menu open
        menu.classList.add('open');

        // Perform open animation
        var mojsType = new mojs.Tween({
          duration: 800,
          onUpdate: function(progress) {

            menu.style.width = bgPath.getBoundingClientRect().width + 'px';
            // elastic variable for the sides
            var elasticProgress = 40 + (elasticPath(progress) * 10),
              // elastiv variable for the center
              elasticProgress2 = 40 - elasticPath(progress) * 20;

            // Calculate New SVG Path
            newPath = 'M00 00 L0 100 L' +
              elasticProgress + ' 100 C' + elasticProgress2 + ' ' +
              (decY - 20) + ' ' + elasticProgress2 + ' ' +
              (decY + 20) + ' ' + elasticProgress + ' 00 L' +
              elasticProgress + ' 00 L0 0 Z';

            // Update path in SVG
            bgPath.setAttribute('d', newPath);

            // onComplete
            if (progress == 1) {

              newPath = 'M 0 0, L 0 100, L 40 100, L 40 0, Z';
              bgPath.setAttribute('d', newPath);
            }
          }
        }).run();
      }
    } else {
      // reset path to default
      closeMenu();
    }
  }
}

function elasticPath() {
  return mojs.easing.path('M0,100 C7.81150159,99.8552004 10.5,124.956388 10.5,124.956388 C10.6364142,-0.167048257 20.7999985,99.8575387 20.8,99.8575415 C20.8000015,99.8575443 26.8367187,138.182953 30.6039062,99.857543 C36.3236123,99.9221201 38.1,118.97564 38.1,118.97564 C38.2039989,23.5845053 46.8999988,99.923904 46.9,99.9239062 C46.9000012,99.9239083 50.8279858,129.142288 53.7,99.923906 C57.6148517,99.9884282 58.9,113.065132 58.9,113.065132 C58.9711335,47.8192476 64.7999992,99.989649 64.8,99.9896504 C64.8000008,99.9896519 67.4706109,119.974518 69.4350189,99.9896506 C72.3313246,100.046231 73.2,109.611947 73.2,109.611947 C73.2519882,61.9267379 77.3999994,100.047123 77.4,100.047124 C77.4000006,100.047125 79.4204624,114.653142 80.8561577,100.047124 C82.8367206,100.021884 83.3999999,106.746427 83.3999999,106.746427 C83.4364957,73.2713076 86.4999995,100.02251 86.4999999,100.022511 C86.5000003,100.022512 87.6948194,110.275967 88.7026805,100.022511 C90.1283952,100.031273 90.5289739,104.813463 90.5289739,104.813463 C90.5549281,81.0074753 92.3999997,100.031718 92.4,100.031719 C92.4000003,100.031719 93.5948603,107.323512 94.3116055,100.031719 C95.2672636,99.9339509 95.7,103.132754 95.7,103.132754 C95.7175753,87.0120996 97.0999998,99.9342524 97.1,99.9342527 C97.1000002,99.9342531 97.6146431,104.872022 98.1,100 L100,100');
}

function closeMenu() {
  // Make menu close
  document.querySelector('.menu').classList.remove('open');
  // Perform close animation
  new mojs.Tween({
    duration: 800,
    onUpdate: function(progress) {
      // elastic variable for closing
      var elasticProgress = elasticPath(progress) * 30;

      // Calculate New SVG Path
      newPath = 'M0,0C0,0,0,100,0,100C0,100,0,100,0,100C' +
        elasticProgress + ',' + (decY - 20) + ',' +
        elasticProgress + ',' + (decY + 20) +
        ',0 0C0,0,0,0,0,0C0,0,0,0,0,0';

      // Update path in SVG
      bgPath.setAttribute('d', newPath);
    }
  }).run();
}
            
          
!
999px
Loading ..................

Console