I want to have my ScrollTriggered image pinned to the top left of page

Question

`Based off the code below, I will walk you through the steps of what happens when the page is initially loaded to the endpoint in which the user scrolls down the web page:

The page is loaded and the canvas image is displayed in the center of the screen. The image is big and takes up most of the viewport (Due to code: const canvasWidth = 800; const canvasHeight = 850;).

As the user scrolls, the image begins to shrink in size and also begins to slide to the top left of the screen as intended (due to code: xPercent: 25, // Move to the right).

Although this part of the code works fine, the issue begins as I continue to scroll down further, the image is then scrolled vertically upwards off screen. I want to have the image pinned to the top left side of the screen once it reaches its scale size of 0.2 as written in code: (scale: 0.2,. How can I allow this to happen? Here is the main part of the code that controls the animation sizing of the image:

Ive tried adjusting the xPercent and yPercent to see if it changes the behavior, and tried setting the ' end: "bottom top" to "bottom bottom". Niether of these changes helped. I want the image to stay pinned at the top right of the screen as i continue to scroll down the page rather than being scrolled up vertically after scrolling into the second page.`

const canvasWidth = 800; // Example width
const canvasHeight = 850; // Example height
canvas.width = canvasWidth;
canvas.height = canvasHeight;



// This part resizes and moves image to far left corner of screen
function render() {
  scaleAndPositionImage(images[imageSeq.frame], context);
}

function scaleAndPositionImage(img, ctx) {
  var canvas = ctx.canvas;

  // Define percentage scale based on canvas size
  var scale = canvas.width / img.width;

  // Calculate new width and height based on the scale factor
  var newWidth = img.width * scale;
  var newHeight = img.height * scale;


  // Position the image at the top-right corner of the canvas
  var newX = canvas.width - newWidth;
  var newY = -45;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, img.width, img.height, newX, newY, newWidth, newHeight);
}

// Animate image movement to the right corner of the screen
gsap.to("#page > canvas", {
  xPercent: 25, // Move to the right
  yPercent: -45, // Move to top
  scale: 0.2, // Shrink the image to 50% of its original size
  scrollTrigger: {
    trigger: "#page > canvas",
    start: "top top",
    end: "bottom top",
    scrub: true,
    pin: true,
    invalidateOnRefresh: true,
    scroller: "#main",
  },
});