Text Fading Effect On Scroll Like The Apple iPhone 12 Page

Preview:

Description:

A fancy text reveal effect that fades in and out your text when scrolling down & up the page. Inspired by Apple iPhone 12 webpage.

It uses CSS background-position-x property to dynamically change the horizontal position of the gradient background of your text depending on the scroll position.

How to use it:

1. Apply the following CSS styles to the target text.

<h1>Text To Animate</h1>

h1 {
  background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
  background-size: 300% 100%;
  background-position-x: calc(100% - var(--percentage));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

2. The JavaScript to detect scroll events and dynamically change the value of the background-position-x property.

const h1 = document.querySelector('h1')
document.addEventListener('scroll', (e) => {
  let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
  h1.style.setProperty('--percentage', `${scrolled * 100}%`)
})