TikTok Tutorial #52- How to create a Text Animation in CSS and Javascript

Alexandra Murtaza -

Learn with us how to create a Text Animation in CSS and Javascript!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim How to #52 or How to bring color with CSS and JS to your website💡 #css #js #webdev #programming #coding #devtok #webdevelopment ♬ original sound - Creative Tim

Contents:
1. HTML Code
2. CSS Code
3. Javascript Code

Get your code ⬇️

1. HTML Code

<svg class="motion" viewBox="0 0 1150 280.7">
<g>
	<path d="M46,233V59"/>
	<path d="M46,59l85,115l87-115"/>
	<path d="M218,59v174"/>
</g>
<g>
	<path d="M354,233c-51,0-93-42-93-93c0-52,42-94,93-94"/>
	<path d="M354,233c52,0,93-42,93-93c0-52-41-94-93-94"/>
</g>
<g>
	<line x1="563" y1="232.5" x2="563" y2="59"/>
	<line x1="490" y1="59.1" x2="636" y2="59.1"/>
</g>
<g>
	<path d="M682,233.1v-174"/>
</g>
<g>
	<path d="M914,140c0-52-41-94-93-94c-51,0-93,42-93,94"/>
	<path d="M914,140c0,51-41,93-93,93c-51,0-93-42-93-93"/>
</g>
<g>
	<path d="M957,233V59"/>
	<path d="M957,59l147,174"/>
	<path d="M1104,233V59"/>
</g>
</svg>

2. CSS Code

body {
  overflow: hidden;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #98B9F2 ;
}
svg {
  width: 90vw;
  height: auto;
  left: 5vw;
}
line,
path {
  stroke-width: 32px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

3. Javascript Code

const tl = gsap.timeline({
  id: 'Timeline',
  repeat: -1,
  repeatDelay: 1.5
});
GSDevTools.create({
  animation: tl
});

const colors = ['#ff0080 ', '#7928ca', '#F2F2F2'];

function tween (node) {
  let path = node;
  const delay = Math.random() * 1;
  const length = path.getTotalLength();
  colors.forEach((color, index) => {
    if (index !== 0) {
      path = path.cloneNode();
      node.parentNode.appendChild(path);
    }
    path.setAttribute('stroke', color);
    tl.set(path, {
      strokeDasharray: length + 0.5,
      strokeDashoffset: length + 0.6,
      autoRound: false
    }, 0);
    tl.to(path, {
      strokeDashoffset: 0,
      autoRound: false,
      duration: 1.2,
      ease: 'power3.out'
    }, index * 0.25 + delay);
  });
}

document.querySelectorAll('.motion path, .motion line').forEach(p => tween(p));

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources: