How to add different scroll speed when using ScrollTrigger

I have three background-images where each one of them should have a different scrollspeed. I tried to use scrollTrigger from gsap but for some reason the scrolling speed is the same on each Image.

I have made an JSFIDDLE where you can check it out and maybe suggest how to achieve that.

Here is the code:

gsap.registerPlugin(ScrollTrigger);

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: "section",
        start: "top top",
        end: "bottom top",
        scrub: true,
      }
    });

    tl.to("#layer1", {
      backgroundPositionY: "5%", 
      ease: "none"
    }, 0) 

      .to("#layer2", {
         backgroundPositionY: "90%", 
         ease: "none"
       }, 0) 

      .to("#layer3", {
         backgroundPositionY: "40%", 
          ease: "none"
      }, 0);

  html {
      scroll-behavior: smooth;
    }

    .parallax-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 150vh;
    }

    #layer1 {
      background: url('https://images.unsplash.com/photo-1663305411753-4c305e177ff3?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM5NDA4ODE&ixlib=rb-1.2.1&q=80') no-repeat center center fixed;
      background-size: cover;
    }

    #layer2 {
      background: url('https://images.unsplash.com/photo-1663183539627-adbe2c8ef43d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM5Mzk5ODc&ixlib=rb-1.2.1&q=80') no-repeat center center fixed;
      background-size: cover;
    }

    #layer3 {
      background: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center fixed;
      background-size: cover;
    }

  <section>
          <div id="layer1" class="parallax-item"></div>
          <div id="layer2" class="parallax-item"></div>
          <div id="layer3" class="parallax-item"></div>
        </section>