https://github.com/teotimepacreau/text-line-filling-animation-on-scroll-day6-of-100daysofcode

Text line filling animation built with Vanilla JS, GSAP, CSS, HTML
https://github.com/teotimepacreau/text-line-filling-animation-on-scroll-day6-of-100daysofcode

animation brutalist css gsap html line-mask linefilling split-type text-animation typography typography-animation vanilla-js vibrant-colors

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/teotimepacreau/text-line-filling-animation-on-scroll-day6-of-100daysofcode
• Owner: teotimepacreau
• Created: 2023-03-05T10:08:40.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T10:37:33.000Z (about 2 years ago)
• Last Synced: 2025-01-15T10:32:42.900Z (4 months ago)
• Topics: animation, brutalist, css, gsap, html, line-mask, linefilling, split-type, text-animation, typography, typography-animation, vanilla-js, vibrant-colors
• Language: CSS
• Homepage: https://teotimepacreau.github.io/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/
• Size: 5.81 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Text line filling animation on scroll

![text-line.gif](https://github.com/teotimepacreau/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/blob/main/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