How to relocate an element on scroll using GSAP! No plugins

Question

I saw this codepen where when you scroll down on a page the 3D picture moves with the page as it scrolls down. It also grows and rotates depending on which section in. I Copied the code and change it so it would work on a div element in html. When I tried it, the div would only move in the first section, not the rest.

How would I be able to move a div element along the page as I scroll to the bottom, the EXACT way as the codepen below?

This code does not use the motion path plugin only the scroll Trigger plugin which is okay since its free.

The animation I want: https://codepen.io/faisy227/full/ZEZozJN

This is the code i tried:

<style>
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    #keyboard {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100px;
        width: 100px;
        background-color: deepskyblue;
    }
    section {
        height: 100vh;
    }
</style>

<main>
    <div id="keyboard"></div>
    <section id="part1" style="background-color: hotpink;"></section>
    <section id="part2" style="background-color: lightpink;"></section>
    <section id="part3" style="background-color: pink;"></section>
</main>

<script>
    gsap.timeline()
    .to('#keyboard', {
         scrollTrigger: {
            trigger: "#part1",
            start: "top 60%",
            end: "bottom bottom",
            scrub: true,
        },
        x: -500,
        y: -200,
        scale: 3
    }).to('#keyboard', { 
        scrollTrigger: {
            trigger: "#part2",
            start: "top bottom",
            end: "center bottom",
            scrub: true
        },
        x: 150, 
        y: 50,
        scale: 0.8
    }).to('#keyboard', { 
        scrollTrigger: {
            trigger: "#part3",
            start: "top bottom",
            end: "bottom bottom",
            scrub: true
        },
        x: 0,
        y: 0,
        scale: 1
    });

    // smooth scroll code for lenis to work
    const lenis = new Lenis();
    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
</script>