0

Trying to build something and wondering if I'm approaching it in the right way.

I've seen an effect where text will look clipped and slide up into view line by line, one after another.

This is the way I've built it, essentially looping through each text element and adding a class that moves it into view (I'm using clipping and translate). To control the delay on each loop through I'm increasing a variable each time. My CSS feels a bit messy though

Codepen here: https://codepen.io/shane-harley/pen/bGEBmGQ

Thoughts?

let transitionTime = 0
    text.forEach(heading => {
      window.addEventListener('load', () => {
            heading.classList.add("active")
            heading.style.transitionDelay = transitionTime + "s"
            transitionTime = transitionTime + .2
        })
    })
Shane Harley
  • 1
  • 6
  • Does this answer your question? [CSS Animations with delay for each child element](https://stackoverflow.com/questions/8294400/css-animations-with-delay-for-each-child-element) – user120242 Jun 18 '20 at 03:17
  • Hmm this actually looks messier than the way I've done it and requires knowing how many children there are going to be. I'm building mine at the moment that it can be a reuseable function - hence the javascript – Shane Harley Jun 19 '20 at 02:26

0 Answers0