istos

index.html

<!-- For the Codepen Challenge of January 2019 -->
<div class="o-wrapper">
  <header class="c-header">
    <h2>Instagram Stories</h2>
    <div class="c-drag">
      You're not swiping!
    </div>
  </header>
  
  <div class="c-slider">
    
    
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    <div class="c-slide">
          <div class="circle">
  <img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
     xml:space="preserve">  
    <circle cx="50" cy="50" r="40" />
  </svg>
</div>
      
    </div>
    
 
</div>

istos.markdown

istos

A Pen by Zerodevpro on CodePen.

License.

script.js

const slider = document.getElementsByClassName('c-slider')[0];
const timeline = new TimelineLite();
const info = document.getElementsByClassName('c-drag')[0];

let canMove = false;
let touchDown = 0;
let prevX = 0;
let slides = document.getElementsByClassName('c-slide');
const slideWidth = slides[0].offsetWidth + 20;


const init = () => {
  slider.addEventListener('mousedown', handleMouse);
  slider.addEventListener('mouseup', handleMouse);
  slider.addEventListener('mousemove', handleMove);
  
  slider.addEventListener('touchstart', handleTouch);
  slider.addEventListener('touchmove', handleTouchMove);
};

/* Mouse handlers */
const handleMouse = e => {
  if (e.type === 'mouseup') {
    canMove = false;
  } else {
    canMove = true;
  }
};

const handleMove = e => {
  if (e.pageX < prevX && canMove) {
    /* to left */
    info.innerHTML = 'Swiping left!';
    handleSwipeLeft();
    canMove = false;
  } else if (e.pageX > prevX && canMove) {
    /* to right */
    info.innerHTML = 'Swiping right!';
    handleSwipeRight();
    canMove = false;
  }

  prevX = e.pageX;
};

/* Touch handlers */
const handleTouch = e => {
  touchDown = e.touches[0].clientX
}

const handleTouchMove = e => {
  if (!touchDown) {
    return
  }

  const touchUp = e.touches[0].clientX
  const touchDiff = touchDown - touchUp

  if (touchDiff > 0) {
    info.innerHTML = 'Swiping left!';
    handleSwipeLeft();
  } else {
    info.innerHTML = 'Swiping right!';
    handleSwipeRight();
  }

   touchDown = null
 };

/* Swipe handlers */
const handleSwipeLeft = () => {  
  timeline.fromTo(slider, 1, 
    {
      x: '0px'
    },
    {
      x: `-${slideWidth}px`,
      ease: Power4.easeOut
    }
  );
  
  timeline.to(slider, 0.001, 
    {
      x: '0px',
      onComplete: () => {
        slider.appendChild(slides[0]);
        slides = document.getElementsByClassName('c-slide');
      }
    }
  );
};

const handleSwipeRight = () => {  
  timeline.to(slider, 0.001, 
    {
      x: `-${slideWidth}px`,
      onComplete: () => {
        const first = slides[0];
        const last = slides[slides.length - 1];
        slider.insertBefore(last, first);
        slides = document.getElementsByClassName('c-slide');
      }
    }
  );
  
  timeline.to(slider, 1, 
    {
      x: `0px`,
      ease: Power4.easeOut
    }
  );
};

init();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

style.css

body {
  font-family: "Muli", sans-serif;
}

.circle {
  position: relative;
  width: 100px;
  height: 100px;
}
.circle svg {
  fill: none;
  stroke: #8a3ab9;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: stroke-draw 6s ease-out infinite alternate;
}
.circle img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  border-radius: 50%;
}
@keyframes stroke-draw {
  from {
    stroke: #8a3ab9;
    stroke-dasharray: 1;
  }
  to {
    stroke: #cd486b;
    transform: rotate(180deg);
    stroke-dasharray: 8;
  }
}

h2 {
  margin: 15px;
  padding: 0;
}

.o-wrapper {
  max-width: 100%;
  padding-bottom: 50px;
}

.c-slider {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 700px;
}

.c-slide {
   display: flex;
  flex-direction: column;
 
  justify-content: space-between;
  flex: 2;
  
}

.c-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-drag {
  opacity: 0.2;
}

styles

<link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet" />