![](https://assets-global.website-files.com/65760ecc4653da65272ac2d2/65c9165a21f967b1d850a951_cinematic%20field%20of%20grain%20(2).webp)
Text Animation
Advanced Gsap
Advanced GSAP scrolling text animation - tutorial coming soon.
Advanced GSAP Text Animation
---head code---
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script defer src="https://unpkg.com/split-type"></script>
<style>
/* Avoid Flash of Unstyled Content */
.is-selected, {
visibility: hidden;
}
</style>
-- before body code --
<script>
function init() {
gsap.registerPlugin(ScrollTrigger);
// Select static and animated elements
const oneAnimated = document.querySelector("#one-animated");
const oneStatic = document.querySelector("#one-static");
const twoAnimated = document.querySelector("#two-animated");
const twoStatic = document.querySelector("#two-static");
const threeAnimated = document.querySelector("#three-animated");
const threeStatic = document.querySelector("#three-static");
// Split the text into words as spans
const splitType = new SplitType("#words-to-split", { types: "words" });
// Set positions
matchLocation(oneStatic, oneAnimated);
matchLocation(twoStatic, twoAnimated);
matchLocation(threeStatic, threeAnimated);
// Hide static elements, make animated elements visible
// Avoids flashing of content
gsap.set(oneAnimated, { visibility: "visible" });
gsap.set(twoAnimated, { visibility: "visible" });
gsap.set(threeAnimated, { visibility: "visible" });
gsap.set(oneStatic, { visibility: "hidden" });
gsap.set(twoStatic, { visibility: "hidden" });
gsap.set(threeStatic, { visibility: "hidden" });
let tl;
function createTimeline() {
let progress = tl ? tl.progress() : 0;
if (tl) tl.kill();
tl = gsap.timeline({
scrollTrigger: {
trigger: ".scroll-track",
start: "10% top",
end: "bottom bottom",
scrub: 1
}
});
tl.to(splitType.words, {
opacity: 0,
rotationZ: 0,
rotationX: 0,
yPercent: -5,
xPercent: 0,
scale: 0.8,
stagger: 0.05
})
.to([oneAnimated, twoAnimated, threeAnimated], {
x: 0,
duration: 2
})
.to(
[oneAnimated, twoAnimated, threeAnimated],
{ y: 0, ease: "power1.inOut", duration: 1 },
">-1"
)
// Fade in the .button element from 0 to 100% opacity
.from(".button", {
opacity: 0,
duration: 1,
ease: "power1.inOut",
}, "<");
tl.progress(progress);
}
createTimeline();
function handleResize() {
matchLocation(oneStatic, oneAnimated);
matchLocation(twoStatic, twoAnimated);
matchLocation(threeStatic, threeAnimated);
createTimeline();
}
function matchLocation(staticElement, animatedEl) {
let boundsRel = staticElement.getBoundingClientRect();
let boundsAbs = animatedEl.getBoundingClientRect();
gsap.set(animatedEl, {
x: "+=" + (boundsRel.left - boundsAbs.left),
y: "+=" + (boundsRel.top - boundsAbs.top)
});
}
window.addEventListener("resize", handleResize);
}
window.addEventListener("load", init);
</script>
view more
![](https://assets-global.website-files.com/65760ecc4653da65272ac2d2/66196683b4df199b827f5aa1_GSAP%20Mask-%20cover.jpg)
Learn how to use a CSS clip-path and GSAP to create an unmasking scrolling transition.
![](https://assets-global.website-files.com/65760ecc4653da65272ac2d2/65f5bac2f859eed3534fe005_flipcover.jpg)
Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.
![](https://assets-global.website-files.com/65760ecc4653da65272ac2d2/65f09a82e5314eefa7b64c54_object-fit-videos.jpg)
Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.