Underline on Scroll

Motion.page 4 breakdance
What do you get when you use a linear gradient, a CSS variable and motion.page ?
A very nice effect that requires only one node in one timeline.

Lorem ipsum dolor sit amet luptatum lorem justo justo ut elitr blandit sit. Clita accusam vero dolore dolor takimata gubergren stet nihil ut est aliquyam feugiat gubergren sadipscing ut. Vulputate dolor assum et ipsum gubergren et duo kasd voluptua stet ea eros ipsum labore consetetur diam qui feugait. Amet amet iriure diam duo blandit est sed liber justo nobis. Et suscipit soluta liber duis. Sadipscing iriure ipsum rebum accumsan ipsum dolor dolores invidunt sed luptatum tempor lobortis diam.

Zzril justo sea aliquyam. Dolores eos amet ipsum sed lorem magna gubergren lorem doming quis takimata in. Accusam clita elitr justo kasd consetetur elitr esse euismod zzril enim tempor nulla dolor. Ut diam sanctus.

Et facilisis magna lorem et illum suscipit erat illum elitr hendrerit. Eos nonumy eirmod praesent eu stet hendrerit rebum cum dolore lorem amet eum ut autem consetetur. Dolor dolore justo amet ut in et magna congue adipiscing no takimata. Sit sit ut nibh. Zzril sed lorem accusam facilisi lorem wisi elitr et voluptua clita dolore magna invidunt kasd esse dolore. Esse elitr exerci duis et ut ut. Enim dolore euismod delenit lorem accusam stet sit dolores ipsum no aliquyam elitr ea te. Nam eum assum vero sit eos rebum. Accusam nulla amet amet iriure dolore elitr ea tempor at est consetetur et justo eos.

Underline Effect

  • Easy to customize
  • No Extra Divs
  • Can work on all elements with Text

It can work anywhere, even in a heading element, as we can put html in the text content

supamike_Abstract_background_Unreal_engine_technology_style_duo_80f59d0e-acdc-4903-8089-bdbd3f2002ad

In an Image Box element

Lorem ipsum dolor sit amet luptatum lorem justo justo ut elitr blandit sit. Clita accusam vero dolore dolor takimata gubergren stet nihil ut est aliquyam feugiat gubergren sadipscing ut. Vulputate dolor assum et ipsum gubergren et duo kasd voluptua stet ea eros ipsum labore consetetur diam qui feugait. Amet amet iriure diam duo blandit est sed liber justo nobis. Et suscipit soluta liber duis.