Vertical carousel with TweenMax.js

index.html

<div class="slider-wrap">
  <div id="card-slider" class="slider">
    <div class="slider-item">
        <div class="animation-card_image">
            <img src="https://m.media-amazon.com/images/M/MV5BMTk5Mzc4ODU0Ml5BMl5BanBnXkFtZTcwNjU1NTI0Mw@@._V1_UY317_CR12,0,214,317_AL_.jpg" alt="">
        </div>
        <div class="animation-card_content">
            <h4 class="animation-card_content_title title-2">Charlize Theron 1</h4>
            <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
            <p class="animation-card_content_city">New York, NY</p>
        </div>
    </div>
    <div class="slider-item">
        <div class="animation-card_image">
            <img src="https://m.media-amazon.com/images/M/MV5BMTk5Mzc4ODU0Ml5BMl5BanBnXkFtZTcwNjU1NTI0Mw@@._V1_UY317_CR12,0,214,317_AL_.jpg" alt="">
        </div>
        <div class="animation-card_content">
            <h4 class="animation-card_content_title title-2">Charlize Theron 2</h4>
            <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
            <p class="animation-card_content_city">New York, NY</p>
        </div>
    </div>
    <div class="slider-item">
        <div class="animation-card_image">
            <img src="https://m.media-amazon.com/images/M/MV5BMTk5Mzc4ODU0Ml5BMl5BanBnXkFtZTcwNjU1NTI0Mw@@._V1_UY317_CR12,0,214,317_AL_.jpg" alt="">
        </div>
        <div class="animation-card_content">
            <h4 class="animation-card_content_title title-2">Charlize Theron 3</h4>
            <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
            <p class="animation-card_content_city">New York, NY</p>
        </div>
    </div>
    <div class="slider-item">
        <div class="animation-card_image">
            <img src="https://m.media-amazon.com/images/M/MV5BMTk5Mzc4ODU0Ml5BMl5BanBnXkFtZTcwNjU1NTI0Mw@@._V1_UY317_CR12,0,214,317_AL_.jpg" alt="">
        </div>
        <div class="animation-card_content">
            <h4 class="animation-card_content_title title-2">Charlize Theron 4</h4>
            <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
            <p class="animation-card_content_city">New York, NY</p>
        </div>
    </div>
    <div class="slider-item">
        <div class="animation-card_image">
            <img src="https://m.media-amazon.com/images/M/MV5BMTk5Mzc4ODU0Ml5BMl5BanBnXkFtZTcwNjU1NTI0Mw@@._V1_UY317_CR12,0,214,317_AL_.jpg" alt="">
        </div>
        <div class="animation-card_content">
            <h4 class="animation-card_content_title title-2">Charlize Theron 5</h4>
            <p class="animation-card_content_description p-2">With no contractual commitments comes the freedom of having top notch content created whenever.</p>
            <p class="animation-card_content_city">New York, NY</p>
        </div>
    </div>
</div>
</div>  

script.js

var cards = $('#card-slider .slider-item').toArray();

startAnim(cards);

function startAnim(array){
    if(array.length >= 4 ) {
        TweenMax.fromTo(array[0], 0.5, {x:0, y: 0, opacity:0.75}, {x:0, y: -120, opacity:0, zIndex: 0, delay:0.03, ease: Cubic.easeInOut, onComplete: sortArray(array)});

        TweenMax.fromTo(array[1], 0.5, {x:79, y: 125, opacity:1, zIndex: 1}, {x:0, y: 0, opacity:0.75, zIndex: 0, boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', ease: Cubic.easeInOut});

        TweenMax.to(array[2], 0.5, {bezier:[{x:0, y:250}, {x:65, y:200}, {x:79, y:125}], boxShadow: '-5px 8px 8px 0 rgba(82,89,129,0.05)', zIndex: 1, opacity: 1, ease: Cubic.easeInOut});

        TweenMax.fromTo(array[3], 0.5, {x:0, y:400, opacity: 0, zIndex: 0}, {x:0, y:250, opacity: 0.75, zIndex: 0, ease: Cubic.easeInOut}, );
    } else {
        $('#card-slider').append('<p>Sorry, carousel should contain more than 3 slides</p>')
    }
}

function sortArray(array) {
    clearTimeout(delay);
    var delay = setTimeout(function(){
        var firstElem = array.shift();
        array.push(firstElem);
        return startAnim(array); 
    },3000)
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gsap/1.19.1/TweenMax.min.js"></script>

style.sass

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700')

html 
    width: 100%
    height: 100%
  
body
    background-image: linear-gradient(180deg, #ffb253 0%, #f56259 100%)
    width: 100%
    height: 100%

.slider-wrap
    height: 100%
    width: 100%
    .slider
        position: absolute
        width: 100%
        left: 50px
        top: 50px
      

.slider-item
    width: 530px
    padding: 20px 0 25px 30px
    border-radius: 10px
    background-color: #ffffff
    display: flex
    justify-content: flex-start
    position: absolute
    opacity: 0
    z-index: 0
    box-shadow: 0 4px 9px #f1f1f4
    position: absolute
    left: 0
    top: 0
    .animation-card_image
        max-width: 60px
        max-height: 60px
        display: flex
        justify-content: center
        align-items: center
        border-radius: 50%
        box-shadow: 0 4px 9px rgba(241, 241, 244, 0.72)
        background-color: #ffffff
        img 
            width: 53px
            height: 53px
            border-radius: 50%
            object-fit: cover
    .animation-card_content
        width: 100%
        max-width: 374px
        margin-left: 26px
        font-family: "Open Sans",sans-serif
        .animation-card_content_title
            color: #4a4545
            font-size: 16px
            font-weight: 400
            letter-spacing: -.18px
            line-height: 24px
            margin: 0
        .animation-card_content_description
            color: #696d74
            font-size: 15px
            font-weight: 300
            letter-spacing: normal
            line-height: 24px
            margin: 10px 0 0 0
        .animation-card_content_city
            font-size: 11px
            margin: 10px 0 0 0
            font-size: 12px
            font-weight: 500
            text-transform: uppercase
            color: #696d74

vertical-carousel-with-tweenmax-js.markdown

Vertical carousel with TweenMax.js

A Pen by Danil Goncharenko on CodePen.

License.