Gallery example

It's my clone of this website

Offset

Text to animate
Offset

        
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
    <style>

#scroll-trigger-container {
  height: 300vh;
}

.pinned-container {
  display: flex;
  position: sticky;
  overflow: hidden;
  top: 0;
}

.text-to-animate {
  opacity: 0;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-to-crop{
  width: 70%;
  height: 100vh;
  position: relative;
}

.image-to-crop img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  border-radius: 25px;
}

.top-border {
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
  height: 20px;
}

    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <article class="container"><h1>Gallery example</h1></article>
    <article class="container"><h1>It's my clone of <a href="https://fix.studio/">this website</a></h1></article>
    <article class="container"><h1>Offset</h1></article>
    <div id="scroll-trigger-container">
      <div class="pinned-container">
        <div class="text-to-animate">Text to animate</div>
        <div class="image-to-crop">
          <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.themoviethemesong.com%2Fwp-content%2Fuploads%2F2014%2F05%2FFuturama-2.jpg&f=1&nofb=1" />
          <div class="top-border">
          <svg width="100%" xmlns="http://www.w3.org/2000/svg">
            <!-- Simple rectangle -->

            <!-- Rounded corner rectangle -->
            <mask id="svgPath">
              <rect x="0" width="100%" height="25px" fill="white" />
              <rect x="0" width="100%" height="50px" rx="25" fill="black" />
            </mask>
            <rect mask="url(#svgPath)" width="100%" height="50px" fill="white" />
          </svg>
        </div>
        </div>
      </div>

    </div>
    <article class="container"><h1>Offset</h1></article>
    <article class="container"><h1>Offset</h1></article>
    <article class="container"><h1>Offset</h1></article>
    <article class="container"><h1>Offset</h1></article>
    <article class="container"><h1>Offset</h1></article>
    <article class="container"><h1>Offset</h1></article>
    <article class="container"><h1>Offset</h1></article>
  </body>
</html>

<script>
  gsap.registerPlugin(ScrollTrigger);

  const timeline = gsap.timeline({
      scrollTrigger: {
          trigger: "#scroll-trigger-container",
          markers: true,
          start: "top bottom", 
          scrub: true,
          end: `bottom top`, 
        }});
  timeline.add('animate');
  timeline.to('.text-to-animate', { opacity: 1, y: 20 }, 'animate');
  timeline.to('.image-to-crop img', { x: '30%' }, 'animate');

</script>