#wrapper
 .card.card1
  .content
   .inner
   %h1.word This
   %h3{"data-text" => "02"} 02
   %p Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
 .card.card2
  .content
   .inner
   %h1.word Check
   %h3{"data-text" => "01"} 01
   %p Nulla consequat massa quis enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. In ac felis quis tortor malesuada pretium.
 .card.card3
  .content
   .inner
   %h1.word Out
   %h3{"data-text" => "04"} 04
   %p Nullam accumsan lorem in dui. Donec vitae orci sed dolor rutrum auctor. Curabitur vestibulum aliquam leo.
 .card.card4
  .content
   .inner
   %h1.word Thing
   %h3{"data-text" => "03"} 03
   %p Fusce risus nisl, viverra et, tempor et, pretium in, sapien. In hac habitasse platea dictumst. Nam adipiscing.
 #trigger
View Compiled

body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:radial-gradient(circle at center, #555, #222);
  font-family:'Acme';
  perspective:600px;
  *{
    transform-style:preserve-3d;
    backface-visibility:hidden;
    &:before, &:after{
      transform-style:preserve-3d;
      backface-visibility:hidden;
    }
  }
  #wrapper{
    width:700px;
    height:500px;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.25);
    &.flash{
      animation:bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
      @keyframes bend{
        0%{
          transform:rotateY(0deg);
        }
        20%{
          transform:rotateY(2.5deg);
        }
        50%{
          transform:rotateY(0deg);
        }
        100%{
          transform:rotateY(0deg);
        }
      }
    }
    #trigger{
      position:absolute;
      width:20px;
      height:20px;
      box-shadow:0 0 0 1px #ccc, 0 0 0 1px #ccc;
      z-index:999;
      border-radius:100%;
      left:calc(12.5% - 12.5px);
      top:calc(50% - 12.5px);
      transition:background 0.2s ease-in-out, opacity 0.2s ease-in-out;
      cursor:pointer;
      &:hover{
        background:#ccc;
        &:before{
          color:#222;
        }
      }
      &.flash{
        transition:box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
        transition-delay:0s, 0.2s;
        box-shadow:0 0 0 1px #ccc, 0 0 0 10px transparent;
        opacity:0;
        pointer-events:none;
      }
      &:before{
        content:'→';
        position:absolute;
        color:#ccc;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        transition:0.2s ease-in-out;
      }
    }
    &.fade{
      opacity:0.25;
    }
    .card{
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      pointer-events:none;
      z-index:0;
      transition:transform 0.4s ease-in-out;
      .content{
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        overflow:hidden;
        background:linear-gradient(to bottom, transparent calc(50% - 1px), rgba(0,0,0,0.05) calc(50% - 1px), rgba(0,0,0,0.05) 50%, transparent 50%), linear-gradient(to right, transparent calc(56% - 1px), rgba(0,0,0,0.05) calc(56% - 1px), rgba(0,0,0,0.05) 56%, transparent 56%), #ccc;
        background-size:100%, 100% 50%, 100%;
        background-repeat:no-repeat;
        background-position:50%, 50% 100%, 50%;
        h1{
          opacity:1;
          position:absolute;
          left:calc(25% + 40px);
          top:20px;
          font-size:120px;
          margin:0px;
          color:rgba(0,0,0,0.175);
          text-transform:uppercase;
        }
        p{
          position:absolute;
          width:22.5%;
          height:40%;
          display:inline-block;
          bottom:0;
          left:calc(25% + 40px);
          line-height:1.5;
          font-family:"Montserrat";
          font-size:14px;
          color:#555;
          padding:5px;
          box-sizing:border-box;
          transition:0.3s ease-in-out;
          clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        }
        h3{
          position:absolute;
          right:-200px;
          top:20px;
          font-size:80px;
          margin:0;
          color:transparent;
          overflow:hidden;
          border-bottom:1px solid rgba(0,0,0,0.175);
          transform:scaleX(0);
          transform-origin:left;
          transition:transform 0s ease-in-out, right 0.4s ease-in-out;
          transition-delay:0.6s, 0s;
          padding:0 10px;
          &:before{
            content:attr(data-text);
            color:transparent;
            -webkit-text-stroke:0.25px rgba(0,0,0,0.25);
            position:absolute;
            transform:translateY(125%) skewY(45deg);
            transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition-delay:0.4s;
            left:10px;
            top:0;
          }
        }
        &:before{
          opacity:0;
          z-index:2;
          transition:0.2s ease-in-out;
        }
        &:before, &:after, .inner{
          content:'';
          position:absolute;
          width:112.5%;
          height:100%;
          left:12.5%;
          top:0;
          background-size:cover;
          transition:0.5s ease-in-out;
        }
        &:after{
          background:transparent;
          transition:0.5s ease-in-out;
        }
        &:before, .inner:after{
          filter:saturate(0);
        }
        .inner{
          width:40%;
          height:45%;
          left:auto;
          right:0%;
          z-index:999;
          top:auto;
          bottom:0;
          transform-origin:left;
          transform:scaleX(0);
          overflow:hidden;
          &:before, &:after{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            background:#222;
            left:0;
            top:0;
            z-index:2;
            transform:scaleX(1);
            transform-origin:right;
          }
          &:after{
            background-size:cover;
            z-index:1;
            transform-origin:50% 50%;
            transform:scale(1.5);
          }
        }
      }
      &.card1{
        .content{
          &:before, .inner:after{
            background-image:url('https://images.unsplash.com/photo-1558845530-c8963f0c26fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80');
          }
        }
      }
      &.card2{
        .content{
          &:before, .inner:after{
            background-image:url('https://images.unsplash.com/photo-1558848369-839e86bc7f84?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80');
          }
        }
      }
      &.card3{
        .content{
          &:before, .inner:after{
            background-image:url('https://images.unsplash.com/photo-1558775723-1f9ca54bb7cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2767&q=80');
          }
        }
      }
      &.card4{
        .content{
          &:before, .inner:after{
            background-image:url('https://images.unsplash.com/photo-1558848618-ce2c2e7bb671?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80');
          }
        }
      }
      &:first-of-type{
        pointer-events:all;
        left:0;
        animation:scaleIn 1s ease-in-out 1 forwards;
        animation-delay:0s;
        transform:translateX(-100%);
        @keyframes scaleIn{
          from{
            transform:translateX(-100%);
          }
          to{
            transform:translateX(-75%);
          }
        }
        z-index:11;
        .content{
          &:before{
            opacity:0.25;
            animation:scaleDown 0.75s ease-in-out 1 forwards;
            animation-delay:0.25s;
            transform:translateX(6.75%);
            @keyframes scaleDown{
              to{
                transform:translateX(0);
              }
            }
          }
          &:after{
            background:#222;
          }
        }
      }
      &:nth-of-type(2){
        z-index:10;
        animation:scaleIn2 1s ease-in-out 1 forwards;
        will-change:transform;
        @keyframes scaleIn2{
          from{
            transform:translateX(-75%);
          }
          to{
            transform:translateX(0%);
          }
        }
        .content{
          p{
            transition-delay:1.85s;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          }
          &:after{
            transition-delay:0.5s;
          }
          h3{
            transition:transform 0.2s ease-in-out;
            right:20px;
            transform:scaleX(1);
            transition-delay:2s;
            &:before{
              transform:translateY(0%);
              transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transition-delay:2.25s;
            }
          }
          h1{
            right:100px;
          }
          .inner{
            animation:scaleIn4 0.5s ease-in-out 1 forwards;
            animation-delay:1.35s;
            will-change:transform;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            @keyframes scaleIn4{
              to{
                transform:scaleX(1);
              }
            }
            &:after{
              animation:scaleUp 1s ease-in-out 1 forwards;
              animation-delay:1.9s;
              will-change:transform;
              @keyframes scaleUp{
                to{
                  transform:scale(1);
                }
              }
            }
            &:before{
              animation:scaleIn5 0.35s ease-in-out 1 forwards;
              animation-delay:1.75s;
              will-change:transform;
              @keyframes scaleIn5{
              to{
                transform:scaleX(0);
              }
            }
            }
          }
          &:before{
            animation:scaleIn3 1.5s ease-in-out 1 forwards;
            animation-delay:0.15s;
            opacity:1;
            will-change:transform;
            @keyframes scaleIn3{
              0%{
                transform:translateX(0%);
                clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
              }
              50%{
                transform:translateX(-12.5%);
                clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
              }
              100%{
                transform:translateX(-12.5%);
                clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
              }
            }
          }
        }
      }
      &:nth-of-type(3){
        z-index:3;
        .content{
          &:before, &:after{
            opacity:0;
            transition:0s;
            transition-delay:0s;
          }
          .inner{
            transform:scaleX(1);
            transition:0.5s ease-in-out;
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            &:before{
              display:none;
            }
            &:after{
              transform:scale(1);
            }
          }
        }
      }
    }
  }
}
View Compiled


/*
 * based on this dribbble shot by Andrew Baygulov: https://dribbble.com/shots/6427548-Kaiser-Slideshow
 */

(function ($) {
    var isActive = false;

    $.fn.shuffleText = function(shuffleResult, options){
        var $this = $(this);

        // Add/Remove Chars You Want To Appear During Shuffle In This Array
        var aChars = new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","k","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

        // Defaults Settings
        var defaults = $.extend({
            time     : 40,    // Time In ms (Milliseconds) Of Shuffle For Each Letter
            maxTime  : 1000,  // Max Time In ms (Milliseconds) Of Global Shuffle
            amount   : 3,     // Amount Of Shuffle For Each Letter
            complete : null   // Do Something When Shuffle Is Completed
        }, options);

        if(shuffleResult == undefined)
            shuffleResult = '';

        // Init Variables
        var aToShuffle     = $this.text().split(''),
            aShuffleResult = shuffleResult.split(''),
            iFlag = 0, n = 0, duration = 0, iLenght = 0,
            interval, aLetters;

        if(!isActive){
            isActive = true;
            // Launch Shuffle
            return $this.each(function(){
                replaceEntry();

                aLetters = $this.find('span');

                // Debugging
                if(defaults.amount < 0)
                    defaults.amount = 0;

                // Calculate Duration Of Global Shuffle
                if((iLength * (defaults.amount + 1) * defaults.time) > defaults.maxTime){
                    duration = defaults.maxTime / (iLength * (defaults.amount + 1));
                }else{
                    duration = defaults.time;
                }

                randomChars();
                interval = setInterval(randomChars,Math.floor(duration));

                // Create The Correct DOM Structure
                function replaceEntry(){
                    $this.empty();

                    if(aToShuffle.length > aShuffleResult.length)
                        iLength = aToShuffle.length;
                    else
                        iLength = aShuffleResult.length;

                    for(i = 0; i < iLength; i++){
                        if(aToShuffle[i] == undefined)
                            $this.append($('<span></span>'));
                        else
                            $this.append($('<span>'+aToShuffle[i]+'</span>'));
                    }
                }

                // The Shuffle Function
                function randomChars(){
                    var randomChars = aChars[Math.floor(Math.random() * aChars.length)];

                    if(iFlag >= iLength){
                        isActive = false;
                        $this.text(shuffleResult);

                        clearInterval(interval);
                        if(typeof defaults.complete == 'function')
                            defaults.complete.call($this);
                    }else{
                        if(n == defaults.amount){
                            if(iFlag >= aShuffleResult.length)
                                $(aLetters[iFlag]).text('');
                            else
                                $(aLetters[iFlag]).text(aShuffleResult[iFlag]);

                            iFlag++; n = 0;
                        }else{
                            $(aLetters[iFlag]).text(randomChars);
                            n++;
                        }
                    }
                }
            });
        }
    };
}(jQuery));


$("#trigger").click(function(){
      $('.card').removeClass("active");
      $('#wrapper').prepend($('#wrapper .card:last'));
      $(this).addClass("flash");
      $('#wrapper').addClass("flash");
      $('.card:nth-of-type(2)').addClass("active");
      $text = $('.active .word').text();
      setTimeout(function(){
        $(".active .word").shuffleText($text, {
          frames   : 2000,  
          maxSpeed : 1,
          amount   : 35,
          complete : null  
          });
        
          }, 1200);
      setTimeout(function(){
        $("#trigger").removeClass("flash");
        $("#wrapper").removeClass("flash");
        
                }, 2000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js