(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.)
Get Elementor Pro Today –
1 – Elementor Pro
Stagger Text effect using GSAP and Elementor
Easily make stagger text animation including line stagger, word stagger or character(char) stagger effect using GSAP library, splitType library.
A visual designer focused on creating emotional digital experience
Works on Multiple Text with class "dm-heading" and h2 class
- The below code works on text with “dm-heading” CSS class and h2 tag.
- If you are not using h2 tag then change it to appropriate tag below by replacing h2 with your desired one, example: h1,h3,p etc.
- Change y:30 to your desired vertical offset value.
- Change 50% in start: ‘top 50%‘ to your desired location for text animation to start. 50% here means middle on screen, the top of the screen is 0% and bottom of screen is 100%.
- Change duration:0.3 to your desired time for each word animation.
- Change stagger:0.1 to your desired time between each word animation.
- Simply change .words from gsap.from(splitHeading.words , {…… to “.lines” for line stagger effect, change it to “.chars” to each character based animation.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
let dmHeading = document.querySelectorAll('.dm-heading');
dmHeading.forEach((dmHeadingElement, index) => {
let splitHeading = new SplitType(dmHeadingElement.querySelector('h2'));
gsap.from(splitHeading.words, {
scrollTrigger: {
trigger: dmHeadingElement,
scroller: 'body',
start: 'top 50%'
},
y: 30,
opacity: 0,
duration: 0.3,
stagger: 0.1
});
});
});
</script>
