(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Tutorial Video:
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Curved Animated Text using GSAP motionpath in Elementor
In this tutorial, we will create a text that follows a curve.
DMMOTIONARTS LIKE AND SUBSCRIBE
Curve Text Code
- dm-text is the CSS class of the text (Make sure to use heading widget v3 version)
- dm-curve is the ID given to the curve svg.
- To understand customization, please watch the above video.
style="fill:transparent;stroke:currentColor;stroke-width:0.5px;"
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/SplitText.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/MotionPathPlugin.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(MotionPathPlugin, SplitText);
let split;
let tween;
let dmCharStagger;
let dmCharDuration;
function dmCurvedText() {
// Responsive values
if (window.innerWidth <= 767) {
// Mobile
dmCharStagger = 0.25;
dmCharDuration = 5;
} else if (window.innerWidth <= 1024) {
// Tablet
dmCharStagger = 0.25;
dmCharDuration = 5;
} else if (window.innerWidth <= 1920) {
// Desktop
dmCharStagger = 0.15;
dmCharDuration = 5;
} else {
// Widescreen
dmCharStagger = 0.10;
dmCharDuration = 5;
}
// Clean up previous instances
if (tween) tween.kill();
if (split) split.revert();
split = new SplitText(".dm-text .elementor-heading-title", {
type: "chars"
});
gsap.set(split.chars, {
opacity: 0
});
tween = gsap.to(split.chars, {
duration: dmCharDuration,
repeat: -1,
ease: "none",
stagger: dmCharStagger,
motionPath: {
path: "#dm-curve",
align: "#dm-curve",
alignOrigin: [0.5, 1.2],
autoRotate: 180,
start: 1,
end: 0
},
keyframes: {
"0%": { opacity: 0 },
"1%": { opacity: 1 },
"99%": { opacity: 1 },
"100%": { opacity: 0 }
}
});
}
// Initial setup
dmCurvedText();
// Rebuild on resize (debounced)
let dmResizeTimer;
window.addEventListener("resize", () => {
clearTimeout(dmResizeTimer);
dmResizeTimer = setTimeout(() => {
dmCurvedText();
}, 100);
});
});
</script>
