/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode

Text line filling animation built with Vanilla JS, GSAP, CSS, HTML

Primary LanguageCSS

Text line filling animation on scroll

text-line.gif

Project goal

  • SplitType lib in order to break paragraphs into lines
  • VanillaJS in order to add a line-mask div in each line (forEach and appendChild)
  • line-mask CSS class with position absolute that cover the line from right to left with high opacity
  • GSAP to handle triggerElement and targetElement + timeline effect. line-mask goes away from left to right
  • responsive handle

🛠️

Vanilla JS, GSAP, CSS, HTML