Tutorial

Elementor GSAP Title animation

Video

Description

I’m just playing with GSAP to familiarise myself. I saw a movie intro title animation on a Netflix movie and thought “I wonder how easy that would be to do with GSAP and Elementor?”.

So here is what I come up with.

Steps

Add a Section/Container
Titles
JavaScript

Add a Section/Container

Depending on your current Elementor settings, either add a Section or a Container to the editor.

Set the overflow to hidden
Set the Min Height to 100vh

Titles

Add a standard Heading Widget to the page
Set the font properties to the final size and attributes
Edit the COntent
Advanced-> CSS Classes = enter "bold-in"
Duplicate the Heading and change the text

JavaScript

Add an HTML Widget to the page
Copy the code below and paste it into the Widget
Play with the constants to get the effect you like.

Code (click to copy)

JavaScript (javascript)

Note: This JavaScript is dependent on my JS Loader which can be found here:

https://github.com/wpeasy/js-utils/tree/main/js-loader-v1

If you load GSAP with alternate methods, the initialisation functions will need to be altered.

<script>
;(w=>{
      const {
        loadJS,
        loadCSS,
        checkDependencies, 
        debug, 
        globals
    } = window.WPG_JS_Loader;
    globals.IS_DEBUG = true; //enable outputting info to console
    
    
    const initTitles = ()=>{
        const titles = gsap.utils.toArray('.bold-in h2');
        const duration = 10;
        const overlap = duration -2;
        const initialScale = 0;
        const maxScale = 1;
        const maxOutline = "5px var(--e-global-color-secondary)";
        const tl = gsap.timeline();
        
        titles.forEach( (title, index) => {
            const myOverlap = index === 0 ? 0 : overlap;
           tl.fromTo(title, 
           {
               scale: initialScale,
               opacity: 0,
               '-webkit-text-stroke' : '0px black',
           },
           {
               ease: "sine.out",
               scale: maxScale,
               opacity: 1,
               '-webkit-text-stroke' : maxOutline,
               duration: duration,
               onComplete: ()=>{ 
                   blurOut(title);
                   if(index === titles.length -1){
                       lastTitleDone();
                   }
                   
               }
           },
           "-=" + myOverlap
           )
        })
    }
    
    const blurOut = (el)=>{
        gsap.to(el,
           {
               
               'filter': 'blur(30px)',
               duration: 4,
               xPercent: 30,
               opacity: 0
           })
    }
    
    const lastTitleDone = ()=>{
        console.log('Animations Completed');
    }

    
    
    const init = ()=>{
        loadJS('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js');
         checkDependencies(['gsap'], 'success/gsap', 'failed/gsap');
         w.addEventListener('success/gsap', initTitles );
    }
    window.addEventListener('elementor/frontend/init', init);
    
})(window);

</script>
<style>
    body:not(.elementor-editor-active) .bold-in h2{
        opacity: 0;
    }
</style>