GSAP scroll trigger example - 3

GSAP timeline examples -
        

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Draggable.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/DrawSVGPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/EaselPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Flip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/GSDevTools.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/InertiaPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/MotionPathHelper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/MotionPathPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/MorphSVGPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Observer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/Physics2DPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/PhysicsPropsPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/PixiPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrambleTextPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollTrigger.min.js"></script>
    <!-- ScrollSmoother requires ScrollTrigger -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollSmoother.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollToPlugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/SplitText.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/TextPlugin.min.js"></script>

    <!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->    
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/EasePack.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomEase.min.js"></script>
    <!-- CustomBounce requires CustomEase -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomBounce.min.js"></script>
    <!-- CustomWiggle requires CustomEase -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/CustomWiggle.min.js"></script>
    <script>
    // use a script tag or an external JS file
    document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(Draggable,DrawSVGPlugin,EaselPlugin,Flip,GSDevTools,InertiaPlugin,MotionPathHelper,MotionPathPlugin,MorphSVGPlugin,Observer,Physics2DPlugin,PhysicsPropsPlugin,PixiPlugin,ScrambleTextPlugin,ScrollTrigger,ScrollSmoother,ScrollToPlugin,SplitText,TextPlugin,RoughEase,ExpoScaleEase,SlowMo,CustomEase,CustomBounce,CustomWiggle)
    // gsap code here!
    });

    </script>
    <title>GSAP timeline examples - </title>
  </head>
  <body>
    <div class="main">
      <div class="pinned">
        <img src="https://www.dziedziczak-artur.com//microblog/2024-01-28-02-04/images/index.jpeg" />
        <div class="grid">
          <div class="tile t1"></div>
          <div class="tile t2"></div>
          <div class="tile t3"></div>
          <div class="tile t4"></div>
          <div class="tile t5"></div>
        </div>
      </div>
    </div>
    <script>
const els = gsap.utils.toArray(".tile");

// simple Fisher–Yates shuffle
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const shuffled = shuffle(els.slice()); // use slice() to avoid mutating original

// create timeline
const tl = gsap.timeline({
  scrollTrigger: {
            trigger: ".main",
            markers: true,
            start: "top top", 
            end: "bottom bottom", 
            scrub: 1
          }
});

// add staggered animation in shuffled order
shuffled.forEach((el, i) => {
  tl.fromTo(el,
    { width: 0},
    {  width: "100%" },
    i * 0.1 // position: staggered by index
  );
});
    </script>
    <style>
    .pinned {
      position: sticky;
      top: 0;
      display: flex;
      flex-direction: row;
    }
    body {
      margin: 0;
      padding: 0;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      object-contain: cover;
    }
    .main {
      height: 500vh;
    }
    .grid {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-gap: 0px;
      flex-direction: column;
      flex-wrap: wrap;
      width: 100%;
      height: 100vh;
    }
    .tile {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 25vw;
      height: 20vh;
      backdrop-filter: invert(100%);
    }
    </style>
  </body>
</html>