'Text Animation Glitches on Small Screens

Looking at the following codepen: https://codepen.io/codeams/pen/Ksbcz, I noticed that the animation would glitch if you shrank the window (i.e., the text wraps upon expanding letter-spacing).

h1 letter-spacing animation

body, h1{
  margin: 0;
  padding: 0;
}

body{
  width: 100%;
  height: 100%;
  background: #30252E;
  color: #f0f0f0;
}

h1{
  width: 100%;
  height: 42px;
  position: absolute;
  top: calc(50% - 21px);
  left: 0;
  text-transform: uppercase;
  text-align: center;
  font: 300  #{42px}/#{1} 'Open sans condensed', sans-serif;

  opacity: 0;
  animation: in 3s ease-out forwards infinite;
  animation-delay: 1s;
}

@keyframes in{
  0%{
    letter-spacing: -17px;
    opacity: 0;
  }
  30%{
    letter-spacing: 4px;
    opacity: 1;
  }
  100%{
    letter-spacing: 4px;
    opacity: 1;
  }
}

How could I do it so that from the screen-size, I would split the words myself and perform the proper animation?

htmlcss


Solution 1:[1]

You could place a <span> in between the text and set display:block for the span at the required screen resolution using the media query.

body, h1{
  margin: 0;
  padding: 0;
}

body{
  width: 100%;
  height: 100%;
  background: #30252E;
  color: #f0f0f0;
}

h1{
  width: 100%;
  height: 42px;
  position: absolute;
  top: calc(50% - 21px);
  left: 0;
  text-transform: uppercase;
  text-align: center;
  font: 300  #{42px}/#{1} 'Open sans condensed', sans-serif;

  opacity: 0;
  animation: in 3s ease-out forwards infinite;
  animation-delay: 1s;
}

@keyframes in{
  0%{
    letter-spacing: -17px;
    opacity: 0;
  }
  30%{
    letter-spacing: 4px;
    opacity: 1;
  }
  100%{
    letter-spacing: 4px;
    opacity: 1;
  }
}


@media only screen and (max-width: 600px) {
  span{
    display:block; /*Will break the text to next line at screen size 600px*/
  }
}
<h1> letter-spacing<span></span> animation</h1>

Solution 2:[2]

Letter-spacing doesn't animate at 60fps so it won't appear buttery smooth when animating. The CSS properties that give you smooth animations (60fps) are:

/*postion*/
transform: translate(value, value)

/*scale*/
transform: scale(n)

/*rotation*/
transform: rotate(deg)

/*opacity*/
opacity: 0 though to 1

Any other values will suffer from 'jank' in one form or another. Most of the stuff people try and animate with other properties can be achieved with the 60fps properties though.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dharman

Related Questions