Gradient Text Scroll Effect Like on the Apple Website (Tutorial)

Apple often uses color gradients on their text elements, which move while scrolling and thus give the text block a mysterious effect. Depending on the color selection, it's easy to briefly gloss or shine the text and then darken it again.

‍
In this tutorial, I'll show you how we can recreate this effect in Webflow and use the “dark” blending mode in Webflow. As a result, the gradient is only visible on the letter and you can move it up and down in a scrolling animation.

The responsive animation also works great. You just have to be careful if you include a shorter or longer text. Then you may have to adjust the scroll interaction a bit or make the text size smaller so that the text element is always in the middle of the browser window and you can read everything easily.