Tutorial

Elementor GSAP Title animation

Uses Plugins

Elementor PRO

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.

1

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
2

Titles

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

JavaScript

  1. Add an HTML Widget to the page
  2. Copy the code below and paste it into the Widget
  3. 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>