0

I am trying to do text reveal animation on a dynamically injected h1 element which has text wrapped inside span element, but trying to animate with translate property doesn't seem to work. I've added window.getComputedStyle() to recalculate the styles before adding the transform: translate property to get the transform property working but still no luck. Am I doing something wrong? Thanks!!

Here's the code!

var textDiv = document.querySelector('.text');
textDiv.innerHTML = '<h1><span>Reveal</span></h1>';

var spanText = document.querySelector('span');
spanText.classList.add('show');
window.getComputedStyle(spanText).getPropertyValue('transform');

spanText.style.transform = 'translateY(100%)';
body {
  background-color: #bedcff;
  font-family: Helvetica;
  font-weight: bold;
}

.container {
  padding: 100px 20px 0;
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  text-align: center;
  font-size: 200px;
  overflow: hidden;
  line-height: 1;
}

h1 span {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
}
<body>
    <div class="container">
        <div class="text">
        </div>
    </div>
</body>
Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
Ameer Jahan
  • 11
  • 3
  • inline-block to span – Temani Afif Nov 13 '20 at 14:53
  • Hi, you are adding a class 'show' but I can't see it in the given CSS. – A Haworth Nov 13 '20 at 14:57
  • Don't think you need the show class specifically, @TemaniAfit comment, setting span as inline-block seems to work. – A Haworth Nov 13 '20 at 15:05
  • @AHaworth Oh yes, I just pasted the css from the wrong file here. 'show' class adds the translateY(0%) property. Didn't know css- transforms doesn't work on inline elements. Man I should've asked this earlier. I just wasted hours fiddling with this. Thanks so much for the help!! – Ameer Jahan Nov 13 '20 at 15:20

0 Answers0