<link rel='stylesheet' href='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.css' />
<script src='https://unpkg.com/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js'></script>

<div class='scroll-animations-example' data-scroll-container>
    <div class='scrollsection' data-scroll-section>
        <div class='item -normal' data-scroll data-scroll-speed="2">
            <img a herf class='image' src='https://static.tildacdn.com/tild3062-3165-4735-a234-393034663735/_22-07-2022_165510.jpg'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="1">
            <img class='image' src='https://static.tildacdn.com/tild3439-6436-4063-b934-623566396639/_22-07-2022_165640.jpg'> 
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/1027/400/300'>
        </div>
        <div class='item -normal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1028/300/400'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1041/400/300'>
        </div>
        <div class='item -big -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/1042/800/600'>
        </div>
        <div class='item -small' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1049/300/400'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1056/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1062/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1068/600/800'>
        </div>
        
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/1069/400/300'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/1072/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/1075/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/1081/600/800'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/111/400/300'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="4">
            <img class='image' src='https://picsum.photos/id/129/400/300'>
        </div>
        <div class='item -big' data-scroll data-scroll-speed="2">
            <img class='image' src='https://picsum.photos/id/137/600/800'>
        </div>
        <div class='item -normal -horizontal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/141/300/400'>
        </div>
        <div class='item -small -horizontal' data-scroll data-scroll-speed="3">
            <img class='image' src='https://picsum.photos/id/145/400/300'>
        </div>
        <div class='item -normal' data-scroll data-scroll-speed="1">
            <img class='image' src='https://picsum.photos/id/147/300/400'>
        </div>
    </div>
</div>

<div class='fake-ui'>
    <div class='logo'></div>
    <div class='nav'>
        <span class='item'></span>
        <span class='item'></span>
        <span class='item'></span>
    </div>
    <div class='footer'></div>
</div>
html, body {
    height: 100%;
    background: #eee;
}

body {
    overflow: hidden;
}

.scroll-animations-example {
    > .scrollsection {
        padding: 10vh 10vh 10vh 10vmax;
        min-width: 550vh;
    }

    > .scrollsection > .item {
        display: inline-block;
        position: relative;
        margin: 0 -30vh 0 3vh;
    }

    > .scrollsection > .item::before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }

    > .scrollsection > .item.-big {
        height: 80vh;
        width: 60vh;
    }

    > .scrollsection > .item.-big.-horizontal {
        height: 60vh;
        width: 80vh;
    }

    > .scrollsection > .item.-normal {
        height: 60vh;
        width: 45vh;
        z-index: 1;
    }

    > .scrollsection > .item.-normal.-horizontal {
        height: 45vh;
        width: 60vh;
    }

    > .scrollsection > .item.-normal:nth-of-type(3n) {
        bottom: 5vh;
    }

    > .scrollsection > .item.-normal:nth-of-type(4n) {
        bottom: -5vh;
    }

    > .scrollsection > .item.-small {
        height: 40vh;
        width: 30vh;
        z-index: 2;
    }

    > .scrollsection > .item.-small.-horizontal {
        height: 30vh;
        width: 40vh;
    }

    > .scrollsection > .item.-small:nth-of-type(3n) {
        bottom: 13vh;
    }

    > .scrollsection > .item.-small:nth-of-type(4n) {
        bottom: -13vh;
    }

    > .scrollsection > .item > .image {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(1);
        opacity: 0;
        pointer-events: none;
        transform: translateX(0) translateY(0) scale(1);
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

    > .scrollsection > .item:nth-of-type(4n) > .image {
        transform: translateX(-30vh) translateY(-30vh) scale(.8);
        transition-delay: 0;
    }

    > .scrollsection > .item:nth-of-type(4n - 1) > .image {
        transform: translateX(30vh) translateY(30vh) scale(.8);
        transition-delay: .05s;
    }

    > .scrollsection > .item:nth-of-type(4n - 2) > .image {
        transform: translateX(-30vh) translateY(30vh) scale(.8);
        transition-delay: .1s;
    }

    > .scrollsection > .item:nth-of-type(4n - 3) > .image {
        transform: translateX(-30vh) translateY(-30vh) scale(.8);
        transition-delay: .15s;
    }

    > .scrollsection > .item > .image.-active {
        transform: translateX(0) translateY(0) scale(1);
        opacity: .8;
        pointer-events: auto;
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

    > .scrollsection > .item > .image.-clicked {
        transform: translateX(0) translateY(0) scale(5);
        opacity: 0;
        pointer-events: auto;
        transition: filter .3s ease,
            opacity 1s ease,
            transform 1s ease;
    }

    > .scrollsection > .item > .image.-active:hover {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(0);
        opacity: 1;
        cursor: pointer;
    }
}


.fake-ui {
    font-size: 0;
    
    > .logo {
        position: fixed;
        top: 2vh;
        left: 2vh;
        height: 3vh;
        width: 2.5vh;
        border: solid 1vh #999;
    }

    > .nav {
        position: fixed;
        top: 2vh;
        right: 2vh;
    }

    > .nav > .item {
        background: #999;
        display: inline-block;
        height: 2vh;
        width: 10vh;
        margin-left: 2vh;
    }

    > .footer {
        position: fixed;
        bottom: 3vh;
        left: 50%;
        transform: translateX(-50%);
        height: 2vh;
        width: 40vh;
        background: #999;
    }
}
View Compiled
class Example {
    constructor(options) {
        this.root = options.root;

        this.init();

        setTimeout(this.showImages.bind(this), 1000);
    }

    init() {
        this.scroll = new LocomotiveScroll({
            el: this.root,
            direction: 'horizontal',
            smooth: true,
            lerp: 0.05,
            tablet: {
                smooth: true
            },
            smartphone: {
                smooth: true
            }
        });

        this.images = this.root.querySelectorAll('.image');

        [].forEach.call(this.images, (image) => {
            image.addEventListener('click', () => {
                image.classList.add('-clicked');
                this.hideImages();
            });
        });
    }

    showImages() {
        [].forEach.call(this.images, (image) => {
            image.classList.remove('-clicked');
            image.classList.add('-active');
        });
    }

    hideImages() {
        [].forEach.call(this.images, (image) => {
            image.classList.remove('-active');
        });

        setTimeout(this.showImages.bind(this), 2000);
    }
}


window.addEventListener('DOMContentLoaded', (event) => {
    const example = new Example({
        root: document.querySelector('.scroll-animations-example')
    });
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.