You are currently viewing Create Stagger Text Animation with Elementor and GSAP

Create Stagger Text Animation with Elementor and GSAP

(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

  1. The below code works on text with “dm-heading” CSS class and h2 tag.
  2. 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.
  3. Change y:30 to your desired vertical offset value.
  4. 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%.
  5. Change duration:0.3 to your desired time for each word animation.
  6. Change stagger:0.1 to your desired time between each word animation.
  7. 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=""></script>
<script src=""></script>
<script src=""></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

Leave a Reply