CodePen Embed - Svg path pagination and rotating page transition

<div class="scene">
  <!-- page start -->
  <div class="page page-1 active">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 1</h1>
    </div>
  </div>
  <!-- page end -->
  <!-- page start -->
  <div class="page page-2">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 2</h1>
    </div>
  </div>
  <!-- page end -->
  <!-- page start -->
  <div class="page page-3">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 3</h1>
    </div>
  </div>
  <!-- page end -->
  <!-- page start -->
  <div class="page page-4">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 4</h1>
    </div>
  </div>
  <!-- page end -->
  <!-- page start -->
  <div class="page page-5">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 5</h1>
      <p class="check-out">Check out my other <a href="https://codepen.io/suez/public/" target="_blank">pens</a></p>
    </div>
  </div>
  <!-- page end -->
  <div class="rt-point">
    <span class="page-number page-number-1 active">1</span>
    <span class="page-number page-number-2">2</span>
    <span class="page-number page-number-3">3</span>
    <span class="page-number page-number-4">4</span>
    <span class="page-number page-number-5">5</span>
  </div>
  <!-- footer start -->
  <div class="footer">
    <div class="nav">
      <ul>
        <li class="nav--btn nav--btn-1 active" data-page="1"></li>
        <li class="nav--btn nav--btn-2" data-page="2"></li>
        <li class="nav--btn nav--btn-3" data-page="3"></li>
        <li class="nav--btn nav--btn-4" data-page="4"></li>
        <li class="nav--btn nav--btn-5" data-page="5"></li>
      </ul>
    </div>
  </div>
  <!-- footer end -->
</div>

@import "compass/css3";

$navElWidth: 3rem; // change this for different nav width/height
$numberOfNavEl: 5;
$navTotalWidth: $numberOfNavEl * $navElWidth + $navElWidth / 2 * ($numberOfNavEl - 1);
$navBorderRadius: 2px;
$totalTime: 1s;
$textHideTime: 0.3s;
@font-face {
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/SouthRose.ttf');
  font-family: SouthRose;
}
@font-face {
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/pirou.otf');
  font-family: Metropolis;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  font-size: 62.5%;
  overflow: hidden;
  @media (max-width: 990px) {
    font-size: 50%;
  }
  @media (max-width: 768px) {
    font-size: 40%;
  }
  @media (max-width: 480px) {
    font-size: 30%;
  }
}
ul {
  list-style-type: none;
}
.scene {
  position: relative;
  height: 100%;
}
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 10rem);
  transition: transform ($totalTime - $textHideTime);
  will-change: transform;
  transform-origin: 50% 100%;
  
  &.inactive {
    transform: rotate(180deg);
  }
  &.removing {
    h1 {
      transform: translateY(-100%);
      opacity: 0;
    }
  }
  &.down {
    transition-delay: $textHideTime;
  }
  &.up {
    
    h1 {
      transition: all 0s !important;
    }
  }
  
  &--rotater {
    position: absolute;
    top: -250%;
    left: -175%;
    width: 450%;
    height: 350%;
  }
  
  &--content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15rem;
    font-size: 3rem;
    
    @media (max-width: 990px) {
      padding: 10rem;
    }
    
    h1 {
      color: #fff;
      font-size: 8rem;
      font-family: SouthRose;
      text-transform: uppercase;
      transition: transform $textHideTime, opacity $textHideTime;
      will-change: transform, opacity;
    }
  }
  
  &.page-1 {
    z-index: 10;
    
    .page--rotater {
      background: #922D50;
    }
  }
  &.page-2 {
    z-index: 9;
    
    .page--rotater {
      background: #9D8420;
    }
  }
  &.page-3 {
    z-index: 8;
    
    .page--rotater {
      background: #4B2840;
    }
  }
  &.page-4 {
    z-index: 7;
    
    .page--rotater {
      background: #204442;
    }
  }
  &.page-5 {
    z-index: 6;
    
    .page--rotater {
      background: #324A5F;
    }
  }
}

.rt-point {
  z-index: 2000;
  position: absolute;
  bottom: 8rem;
  left: calc(50% - 2rem);
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #DCC7BE;
  overflow: hidden;
  
  .page-number {
    display: block;
    position: absolute;
    top: calc(50% - 1.5rem);
    left: calc(50% - 1.5rem);
    width: 3rem;
    text-align: center;
    font-size: 3rem;
    line-height: 1;
    font-family: Metropolis;
    font-weight: bold;
    transition: transform $totalTime;
    will-change: transform;
    
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        margin-left: 5rem * ($i - 1);
      }
    }
  }
}

.footer {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10rem;
  background: #0D1B1E;
}

.nav {
  z-index: 3000;
  position: relative;
  width: $navTotalWidth;
  height: $navElWidth;
  margin: 4rem auto;
  
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  
  ul {
    z-index: 100;
    position: relative;
  }
  
  &--btn {
    position: relative;
    float: left;
    display: block;
    width: $navElWidth;
    height: $navElWidth;
    border: 2px solid rgba(255,255,255, 0.3);
    margin-right: $navElWidth / 2;
    cursor: pointer;
    transition: all $totalTime;
    
    &:before {
      content: "";
      position: absolute;
      display: block;
      width: 85%;
      height: 85%;
      left: 50%;
      top: 50%;
      background: #fff;
      transition: all $totalTime;
      will-change: transform, opacity;
      transform: translateX(-50%) translateY(-50%) scale(0.5);
      opacity: 0;
    }
    
    &.active:before,
    &:hover:before {
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
    &:hover:before {
      background-color: #52EAD2;
    }
    
    &:last-child {
      margin-right: 0;
      
      &:after {
        display: none;
      }
    }
  }
}

.pathIt-svg {
  z-index: 5000;
  position: absolute;
  top: -$navBorderRadius;
  left: -$navBorderRadius;
}

.check-out {
  margin-top: 3rem;
  color: #fff;
  font-family: Metropolis;
  
  a {
    color: rgba(255,170,170,1);
    text-decoration: none;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid;
  }
}

View Compiled

$(document).ready(function() {
  
  var $page = $(".page"),
      pages = $page.length,
      scrolling = false,
      curPage = 1;
  
  /* PLEASE DON'T LOOK AT THIS */
  function svgPagination(prev, next, dir, revDir, divider) {
    if (!divider) {
      destroySvg(revDir, prev);
      if (revDir) {
        between(dir, prev);
      } else {
        between(dir, prev - 1);
      }
      createSvg(dir, next, 600, 300);
    } else {
      destroySvg(revDir, prev, 600 / divider);
      if (revDir) {
        between(dir, prev, 150 / divider, 150 / divider, 750 / divider);
      } else {
        between(dir, prev - 1, 150 / divider, 150 / divider, 750 / divider);
      }
      createSvg(dir, next, 600 / divider, 300 / divider);
    }
  }
  
  function timeoutHell(tempPrev, tempNext, numDir, numDirRev, divider, i) {
    setTimeout(function() {
      svgPagination(tempPrev, tempNext, numDir, numDirRev, divider);
    }, 900 / divider * i);
  }
  
  function pagination(page, direction) {
    scrolling = true;
    curPage = page;
    var tempPage = page,
        prevPage = +$(".nav--btn.active").attr("data-page"),
        $prevActive = $(".page.active"),
        $newActive = $(".page-" + page),
        numDir = (direction === "down") ? 0 : 1,
        numDirRev = (direction === "down") ? 1 : 0;
    $page.removeClass("inactive active down up");
    $(".nav--btn").removeClass("active");
    $(".nav--btn-" + page).addClass("active");
    $newActive.addClass("active");
    
    if (Math.abs(prevPage - curPage) > 1) {
      var divider = Math.abs(prevPage - curPage),
          tempPrev = prevPage,
          tempDir = (direction === "down") ? 0 : 1,
          tempNext = (!tempDir) ? prevPage + 1 : prevPage - 1;
      for (var i = 0; i < divider; i++) {
        if (!i) {
          svgPagination(tempPrev, tempNext, numDir, numDirRev, divider);
        } else {
          timeoutHell(tempPrev, tempNext, numDir, numDirRev, divider, i)
        }
        tempPrev = tempNext;
        tempNext = (!tempDir) ? tempNext + 1 : tempNext - 1;
      }
    } else {
      svgPagination(prevPage, curPage, numDir, numDirRev);
    }
    
    $(".page-number").css("transform", "translateX(-"+ (page - 1) * 5 +"rem)");
    
    if (direction === "down") {
      $prevActive.addClass("removing down");
    }
    if (direction === "up") {
      $newActive.addClass("removing up")
    }
    while (--tempPage) {
      $(".page-" + tempPage).addClass("inactive");
    }
    setTimeout(function() {
      $page.removeClass("removing up");
    }, 700);
    setTimeout(function() {
      scrolling = false;
    }, 1000);
  }
  
  function navigateUp() {
    if (curPage > 1) {
      curPage--;
      pagination(curPage, "up");
    }
  }

  function navigateDown() {
    if (curPage < pages) {
      curPage++;
      pagination(curPage, "down");
    }
  }
  
  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (!scrolling) {
      if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        navigateUp();
      } else { 
        navigateDown();
      }
    }
  });
  
  $(document).on("click", ".nav--btn:not(.active)", function() {
    if (scrolling) return;
    var nextPage = +$(this).attr("data-page"),
        dir = (curPage < nextPage) ? "down" : "up";
    pagination(nextPage, dir);
  });
  
  function between(dir, point, duration, delay, rDelay, easing) {
    var w = $(".nav--btn").outerWidth() / 2,
        duration = duration || 150,
        delay = delay || 150,
        rDelay = rDelay || 750,
        strokeW = 2,
        easing = easing || "linear",
        d = ["0," + w, w + "," + w];
    
    if (dir) d.reverse();
    
    d[0] = "M" + d[0];
    
    var svg = $("<svg class='pathIt-svg'><path stroke='#fff' fill='none' stroke-width='"+ strokeW +"' d='"+ d +"'/></svg>");
    
    svg.width(w).height(2*w);
    
    var $path = $(svg).find("path"),
        len = $path[0].getTotalLength();
    
    $path.velocity({strokeDasharray: len, strokeDashoffset: len}, {duration: 0});

    $(".nav--btn-" + point).append(svg);
    $(svg).css({"left": (w * 2 - 2)});
    
    $path.delay(delay).velocity({strokeDashoffset: 0}, {duration: duration, easing: easing});
    setTimeout(function() {
      $(svg).css("transform", "rotate(180deg)");
      $path.velocity({strokeDashoffset: len}, {duration: duration, easing: easing});
    }, rDelay);
    
    setTimeout(function() {
      $(svg).remove();
    }, rDelay + duration + 10);
    
  }
  
  function createSvg(dir, point, duration, delay, easing) {
    
    var wh = $(".nav--btn").outerWidth(),
        duration = duration || 600,
        delay = delay || 0,
        strokeW = 2,
        easing = easing || "linear",
        dTop = ["0," + wh/2, "0,0", wh + ",0", wh + "," + wh/2],
        dBot = ["0," + wh/2, "0," + wh, wh + "," + wh, wh + "," + wh/2],
        dataDir = (dir) ? 1 : 0;
    
    if (dir) {
      dTop.reverse();
      dBot.reverse();
    }
    dTop[0] = "M" + dTop[0];
    dBot[0] = "M" + dBot[0];
    
    var svg = $("<svg data-dir='"+ dataDir +"' class='pathIt-svg'><path stroke='#fff' fill='none' stroke-width='"+ strokeW +"' d='"+ dTop +"'/><path stroke='#fff' fill='none' stroke-width='"+ strokeW +"' d='"+ dBot +"'/></svg>");
    
    svg.width(wh).height(wh);
    
    var len = $(svg).find("path")[0].getTotalLength();
    
    $(svg).find("path").each(function() {
      $(this).velocity({strokeDasharray: len, strokeDashoffset: len}, {duration: 0});
    });

    $(".nav--btn-" + point).append(svg);
    
    $(svg).find("path").each(function() {
      $(this).delay(delay).velocity({strokeDashoffset: 0}, {duration: duration, easing: easing});
    });
    
  }
  
  function destroySvg(dir, point, duration, delay, easing) {
    
    var duration = duration || 600,
        delay = delay || 300,
        easing = easing || "linear",
        $svg = $(".nav--btn-" + point + " svg"),
        dataDir = +$svg.attr("data-dir");
    
    setTimeout(function() {
      if (dataDir !== dir) $svg.css("transform", "rotate(180deg)");
    }, delay);
    
    $svg.find("path").each(function() {
      var $path = $(this),
          len = $path[0].getTotalLength();
      $svg = $path.parent(),
      $path.delay(delay).velocity({strokeDashoffset: len}, {duration: duration, easing: easing});
    });
    
    setTimeout(function() {
      $svg.remove();
    }, duration + delay + 10);
    
  }
  
  createSvg(0,1,1);
  
});

This Pen is owned by Nikolay Talanov on CodePen.

See more by @suez on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript