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:
