Image reveal from text on scroll (without SVG) | HTML, CSS and vanilla JavaScript

In this tutorial, I will show you how you can create an image reveal effect on scroll using SCSS and vanilla Javascript without using SVG. Please like this video and subscribe to this channel if you find this video useful.

Code: https://codepen.io/sangambk1199/pen/PopZxOx

Calculations used in the video:

To calculate scale amount:
Divide screen width by letter width (Screen width / Letter width)

To calculate transform-origin:
1. Subtract scale amount by 1 and divide distance between leftmost edge of the screen and the letter (Space from left-most part of screen / [Scale amount - 1])
2. Find transform position in pixels by adding answer from (1) and distance between leftmost point of heading and the letter (Space from left-most part of H1 + Answer from (1))
3. Convert the answer into percentage (Transform-origin in px / Heading's width * 100)

Music used in this video:
Aarigod - Golden https://chll.to/0dde36ab
Ezzy - Focus https://chll.to/57962f44
Philanthrope, Guillaume Muschalle - Soil https://chll.to/122c0244
Psalm Trees, Guillaume Muschalle - Sombre https://chll.to/2aa0115d
Toonorth - Far From Home https://chll.to/46a85366
Philanthrope, Brock Berrigan, Birocratic, iamalex - Brockoli https://chll.to/67c06575
Nymano - New Horizons https://chll.to/47e0ca79
Sleepy Fish - Velocities https://chll.to/7d007bdb
chromonicci - Window. https://chll.to/fba5769c

Ps. I'm not sorry for my English. Thank you!