Появление снимков при скролле

Предлагаю в самом начале посмотреть на сам эффект на видео или в галерее в самом низу страницы.

А теперь перейдём к простой инструкции. Вам понадобится:

1. Умение внимательно читать и пользоваться мышкой.
2. Галерея GL11 (или любая другая с несколькими фотографиями в ряду, но в таком случае вы уже сами там как-нибудь экспериментируйте).
3. Блок T123, в который нужно будет вставить код. Блок надо будет разместить под галереей.

Я подсмотрел этот скрипт у одного дизайнера. Если хотите взглянуть на оригинал, вэлком на codepen. Но в моём случае CSS упрощён, чтобы просто получить нужный эффект.

В коде задействованы 2 библиотеки и 1 модуль: lenis, gsap и scrolltrigger. Если вам это ни о чём не говорит, ничего страшного (мне тоже), вам всё-равно не понадобится них разбираться.

Итак, приступим. Для начала создайте галерею, залейте в неё нужные фотографии и после неё добавьте блок T123. перейдите в настройки галереи и задайте ей класс uc-scroll-gallery. Теперь опубликуйте страницу и нажмите правой кнопкой мыши на любой фотографии галереи.

Видите класс у фотографии? Нам нужен родительский класс. Он очень похож: t552__tile. Теперь гляньте по дереву выше, ищите контейнер: t552__container. Записали все классы, теперь переходим к коду. Вставьте его в блок T123:

<style>
.uc-scroll-gallery {
     
    position: relative;
     
    z-index: 1;
}

.uc-scroll-gallery .t552__container {
     
    margin-top: 300px;
     
    margin-bottom: -300px;
}
</style>

<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@latest/bundled/lenis.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);
const lenis = new Lenis({
     duration: 1.5,
     easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))
});

function raf(time) {
     
    lenis.raf(time)
     
    requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
const tl = gsap.timeline({
     scrollTrigger: {
          trigger: '.t552__tile',
          scrub: true
         
    }
});
.to('.t552__tile', {
     stagger: .15,
     y: -300,
     scrub: true
});
</script>

Если соберётесь экспериментировать, то не забывайте, что margin в контейнере должен совпадать с параметром y в конце скрипта, иначе блок с галереей будет наезжать на предыдущий.

Удачных экспериментов. Ссылки на свои примеры присылайте в комментарии.