Kevin Powell - Community•14mo ago

How to animate text like this?

Hi guys. I am struggling to replicate this animation : https://www.veed.io/view/31810767-8caa-4f6b-8212-273bdd17dfbd?panel=share. i want a word to fade out just as in next word fades in. Any help i would be greatly thankful.

Srajan

VEED

VEED - Screen Recording - Oct 9, 2023

Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED

6 Replies

bibamann•14mo ago

One quick way to do it: https://codepen.io/Christian-Lorenz/pen/yLGGZRy the 1000 in the setInterval is the text change in ms, the 750ms in css the transition time to fade in / out.

dys 🐙•14mo ago

I worked up a couple ways to accomplish the effect. One uses keyframes like:

@keyframes fade1 {
  0% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}

@keyframes fade2 {
  0% { opacity: 0 }
  20% { opacity: 0 }
  35% { opacity: 1 }
  50% { opacity: 0 }
}

@keyframes fade1 {
  0% { opacity: 1 }
  25% { opacity: 0 }
  100% { opacity: 0 }
}

@keyframes fade2 {
  0% { opacity: 0 }
  20% { opacity: 0 }
  35% { opacity: 1 }
  50% { opacity: 0 }
}

The other uses the <animate>tag in a SVG:

<svg viewBox="0 0 2000 500">
  <text x="1000" y="350">
    <animate
      id="anim1"
      attributeName="opacity"
      values="1; 0"
      dur="2s"
      begin="0; anim4.end"
      fill="freeze"
    />
    <tspan>This Text</tspan>
  </text>
  <text x="1000" y="350">
    <animate
      id="anim2"
      attributeName="opacity"
      values="0; 1; 0"
      dur="2.5s"
      begin="anim1.end - 0.5s"
      fill="freeze"
    />
    <tspan>Also</tspan>
  </text>
  ⋮

<svg viewBox="0 0 2000 500">
  <text x="1000" y="350">
    <animate
      id="anim1"
      attributeName="opacity"
      values="1; 0"
      dur="2s"
      begin="0; anim4.end"
      fill="freeze"
    />
    <tspan>This Text</tspan>
  </text>
  <text x="1000" y="350">
    <animate
      id="anim2"
      attributeName="opacity"
      values="0; 1; 0"
      dur="2.5s"
      begin="anim1.end - 0.5s"
      fill="freeze"
    />
    <tspan>Also</tspan>
  </text>
  ⋮

I'd probably go with the SVG method. It's easier to insert into the flow & it's more flexible when editing because elements start relative to each other rather than on an absolute timeline.

bibamann•14mo ago

Ui, this is a very creative approach without using javascript. Props for that! But I think JS is the way to go here when it comes to reusability or dynamic text changes. But really a nice approach. Btw. Does it really need svgs? All in all you're just setting animation delays for each text element which you could also do with animation-delay in css?

dys 🐙•14mo ago

It depends on the situation. I can more easily get more complex behaviors out of the SVG animated using SMIL, say I want the durations to vary or I want to sync the animation of multiple properties simultaneously. Note that the begin property of the second element is anim1.end. That type of event-based triggering is only available in SMIL which only works on SVGs. I did an example only using animation-delay, but it's not possible to loop it.

bibamann•14mo ago

Ah ok. Well I'm just looping through the childnodes adding / removing a opacity class - no matter how many childnodes (texts) are in there.

dys 🐙•14mo ago

I've also found learning SVG animations useful for doing NFTs because they frequently display in contexts where JavaScript is disabled (i.e. from within an <img> tag).

Gaming

Programming

How to animate text like this?