I have an image (svg) that start out in the middle of the page on load. As the user scrolls down, I want to have that image drift up and to the left so that it eventually gets pinned in the top left corner.
I tried using translate with the scroll number but I feel like it's a guessing game on where the image will end up and what path it takes. Here is what I had so far.
window.addEventListener('scroll', function(evt) {
let image = document.getElementById('image');
let scrollY = window.pageYOffset;
// how do I use the scrollY to accomplish this?
image.style.transform = ??
<div style="text-align: center; background: blue; height: 900px;">
<img id="image" style=" margin-top: 200px; " src="mySvg.svg" />
</div>