Text Reveal Animation With Gsap - Elementor WordPress Tutorial Flex Container
Unlock the magic of text reveal animations with our GSAP tutorial! Learn how to effortlessly create captivating text effects using Elementor in WordPress.
Text Reveal Animation With Gsap
HTML
//Code combined (for load on page and scroll)
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
const myText = new SplitType('.elementor-heading-title')
gsap.to('.char', {
y: 0,
stagger: 0.02,
delay: 0.2,
duration: .1,
})
gsap.registerPlugin(ScrollTrigger);
let revealContainers = document.querySelectorAll(".reveal-text");
revealContainers.forEach((container) => {
let tl = gsap.timeline({
scrollTrigger: {
trigger: container,
}
});
tl.set(container, { autoAlpha: 1 });
tl.from(container, 1.5, {
duration: 1.8,
delay: .05,
y: 200,
skewY: 5,
stagger: {
amount: 0.05
},
ease: "rough.out"
});
});
</script>
//Code for the onpage load animation
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
const myText = new SplitType('h1')
gsap.to('.char', {
y: 0,
stagger: 0.02,
delay: 0.2,
duration: .1,
})
</script>
//Code for the onscroll load animation
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
let revealContainers = document.querySelectorAll(".reveal-text");
revealContainers.forEach((container) => {
let tl = gsap.timeline({
scrollTrigger: {
trigger: container,
}
});
tl.set(container, { autoAlpha: 1 });
tl.from(container, 1.5, {
duration: 1.8,
delay: .05,
y: 200,
skewY: 5,
stagger: {
amount: 0.05
},
ease: "rough.out"
});
});
</script>
CSS
/*Code for the onload load animation*/
/*Add this code in the container where you have your text and set
the class on the text/heading widget */
.text {
overflow: hidden;
}
/*Add this code under the custom CSS of the HTML widget you have your GSAP code.
If you forget to add this, the effect will not work*/
.char {
transform: translateY(175px);
transition: transform .8s ;
}