Creative Studio

with A dream to Create Amazing Design- Based Solutions | 
				
					Make sure you have all words inside <span> word </span> tag
Add the following script to your page
Add class '.animate-text' to your heading
				
			
				
					<!-- SplitType Library -->
<script src="https://unpkg.com/split-type"></script>

<!-- GSAP Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize SplitType
    var typeSplit = new SplitType('.animate-text', {
        types: 'lines, words, chars',
        tagName: 'span' // Wrap words/characters in spans
    });

    // Animate the text using GSAP
    gsap.from('.animate-text .word', {
        y: '100%',          // Initial position
        opacity: 0,         // Start with invisible words
        duration: 0.7,      // Animation duration
        ease: 'power1.out', // Animation easing
        stagger: 0.1        // Delay between animations for each word
    });
});
</script>