gsap+smoothScroll

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

if(ScrollTrigger.isTouch !==1){
    ScrollSmoother.create({
        wrapper:".wrapper",
        content:'.content',
        smooth:1.5,
        effects:true
    })
}


//top
gsap.fromTo(".hero-section", { opacity:1}, {
    opacity: 0, 
    scrollTrigger: {
        trigger: ".hero-section", 
        start: "center",
        end: "820",
        scrub: true

    }
})

//gallery
let itemsL = gsap.utils.toArray(".gallery__left .gallery__item")
itemsL.forEach(item => {
    gsap.fromTo(item, {x:-300, opacity:0}, {
        opacity: 1, x:0,
        scrollTrigger: {
            trigger: item, 
            start:"-850",
            end:"-50",
            scrub: true

        }
    })

})

let itemsR = gsap.utils.toArray(".gallery__right .gallery__item")
itemsR.forEach(item => {
    gsap.fromTo(item, {x:300, opacity:0}, {
        opacity: 1, x:0,
        scrollTrigger: {
            trigger: item, 
            start:"-850",
            end:"-50",
            scrub: true

        }
    })

})

:root {
    --index:calc(1vw + 1vh);
    --color-header: #f4efec;
    --color-text:#cdc6c3;
    --gallery-gap:calc(var(--index) * 10);
}
/* will-change */
.content, .gallery > *, .main-header { will-change: transform;}

.container{padding: 0 7vw; min-height: 100vh;}
.main-title { font-size: calc(var(--index) * 7); position: absolute; width: min-content; bottom: 12vh;}
.gallery{display: flex; padding: calc(var(--index) * 8) 0;}
.gallery > * { flex: 1; display: flex; align-items: center;flex-direction: column;}
.gallery__left{ margin-top: calc(var(--gallery-gap) * 0.5);}
.gallery__item { max-width: calc(var(--index) * 21); margin-bottom: var(--gallery-gap); max-height: 80vh; border-radius: 8px;}

<div class="wrapper">
    <div class="content">
        <div class="container">
        
            <header class="hero-section">
                <img src="./img/p2.png" alt="" data-speed="0.6" data-lag="0.5">
                <div class="main-header">
                    <h1 class="main-title">main<br>title</h1>
                </div>
            </header>
        
            <div class="port">
                <div class="container">
                    <main class="gallery">
                        <div class="gallery__left" data-speed="0.8">
                            <img class="gallery__item" src="img/2.jpg">
                            <img class="gallery__item" src="img/3.jpg">
                            <img class="gallery__item" src="img/4.jpg">
                        </div>
                        <div class="gallery__right" data-speed="1.1">
                            <img class="gallery__item" src="img/rabbit.png">
                            <img class="gallery__item" src="img/7.jpg">
                            <img class="gallery__item" src="img/5.jpg">
                        </div>
                    </main>
                </div>
            </div>
            
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollSmoother.min.js"></script>