ScrollY to Window Position

I am looking for advice in JS about scrollY.

Situation is looking like that:

I have element that is scalling by window.scrollY, and I am using scroll smoothing script.

Unfortunetly this script "slows" viewport but not scroll value.

I want this scalable element to work on viewport position not on scroll value because right now it is not scalling smooth, it only "jumps" to size when moving scroll wheel.

This is script for scalling object:

    const div = document.querySelector('#text-panel');
    
    window.addEventListener('scroll', () => {
      console.log(window.scrollX)
      div.style.transform = `scale(${0 + window.scrollY/500})`;
    });

This is script I am using to smooth scrolling:
https://sudip-bhowmick.github.io/butterjs/butter.js

What should I use to change this to smooth scaling.

I was trying to use some transition in Css but it is not working on this type of element.

Additionaly i found something like "viewportOffset.top" but somehow it is not working.

If you want to achieve smooth scaling of an element based on the viewport position rather than the scroll value, you can use a combination of CSS transitions and JavaScript to create a smooth effect. Using a library like butter.js for smooth scrolling might conflict with the effect you're trying to achieve. Here's how you can do it:

CSS Transitions:
CSS transitions can be used to achieve smooth animations without the need for complex JavaScript calculations.

css

#text-panel {
    transition: transform 0.3s ease; /* Add transition to the transform property */
}

JavaScript for Scaling:
You can use JavaScript to update the scale of the element based on the current viewport position. Instead of using the window.scrollY, you can use window.pageYOffset which returns the vertical pixel value of the current scroll position.

javascript

const div = document.querySelector('#text-panel');

window.addEventListener('scroll', () => {
    const viewportPosition = window.innerHeight - div.getBoundingClientRect().top;
    const scaleFactor = 1 + (viewportPosition / 500); // Adjust the division value for scaling intensity
    div.style.transform = `scale(${scaleFactor})`;
});

viewportPosition calculates how much of the element is visible in the viewport. The closer the element is to the top of the viewport, the larger the viewportPosition will be. The scaleFactor then adjusts the scaling based on this position.