Skewed / fisheye / distorted images with scroll?

Custom code
1

Hello! I want to make a skewed distortion effect on my images when scrolling like the one on vvisual.biz, ideally I want the images to be able to bring people to their individual pages once clicked

I am a total noob at coding but I know it’s made with gsap, and chatgpt told me it’s like something connected to the smooth scroll they have but I have no clue how to do this. My partner told me to try ask it to generate code but nothing worked, although I have managed to get lenis smooth scrolling to work on a test readymag site

This is the code I have so far to implement lenis smooth scrolling which works like a charm but now I just want to try the distortion thing. Any help is extremely appreciated!

HEAD:

<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>

BEFORE BODY

<script>
setTimeout(function() {
  const lenis = new Lenis({
    wrapper: document.querySelector('.content-scroll-wrapper'), // your scroll container
    content: document.querySelector('.content-scroll-wrapper > div'), // usually the first child
    duration: 1.2,          // default is 1.2 (seconds)
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // smooth easing function
    orientation: 'vertical', // 'vertical' or 'horizontal'
    gestureOrientation: 'vertical',
    smoothWheel: true,
    infinite: false,
  });

  // RAF (requestAnimationFrame) integration
  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);
}, 1000);
</script>