fbpx

Tutorial

Elementor Split Character Animation

Uses Plugins

Elementor PRO

Description

Another demonstration of how to load JS and CSS dynamically, directly within an Elementor HTML Widget. This example uses SplittingJS to split a standard Elementor Heading Widget into individual characters, and then CSS to animate them.

SplittingJS : https://splitting.js.org/

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

1

Enqueue js-loader.min.js

Firstly for Dynamic JS and CSS loafing from an HTML Widget to work. The JavaScript code js-loader.min.js must be enqueued.

This may be done from Elementor Custom Code, PHP Snippets, or any other code management plugin. See below for a Code Snippets JSON file if you prefer that method.

GitHub: https://github.com/wpeasy/js-utils/tree/main/js-loader-v1
CDN: https://wpeasy.b-cdn.net/js-loader-v1/js-loader.min.js

2

Elementor Heading Widget

  1. Add a Heading Widget to the editor
  2. Set the CSS ID to "split-this"
  3. Change the content to whatever you want
3

HTML Widget for JS and CSS

  1. Add an HTML Widget to the page
  2. Copy and paste the below code into the Widget
  3. Play with the JavaScript constants and CSS Variables

Code (click to copy)

Code for HTML Widget (javascript)

<script>
    const {
        loadJS,
        loadCSS,
        checkDependencies, 
        debug, 
        globals
    } = window.WPG_JS_Loader;
    globals.IS_DEBUG = true; //enable outputting info to console
    globals.CHECK_TIMEOUT = 2000; //Wait up to 2 seconds for dependencies before dispatching an error. Defaults to 1600.

    /*@see https://splitting.js.org/ */
    loadCSS('splitting', 'https://unpkg.com/splitting/dist/splitting.css');
    loadCSS('splitting-cells', 'https://unpkg.com/splitting/dist/splitting-cells.css');
    loadJS('Splitting', 'https://unpkg.com/splitting/dist/splitting.min.js');
    checkDependencies(['Splitting'], 'success/Splitting', 'failed/Splitting');
    
    window.addEventListener('success/Splitting', () => {
        const spltEl = document.getElementById('split-this');
        Splitting({
            target: "#split-this h2"
        })
        
        const myChars = spltEl.querySelectorAll('.char');
        const rotationRange = 180;
        const offestRange = 200;
        const padding = "3px"
        myChars.forEach( el => {
            el.style.padding = padding;
            el.style.setProperty('--rotation', (-rotationRange + Math.random()*rotationRange*2) + 'deg');
            el.style.setProperty('--offset', (-offestRange + Math.random()*offestRange*2) + 'px');
        })
        spltEl.classList.add('show');
        
    });
    
</script>
<style>

    #split-this{
        --char-delay: 100ms;
        --char-animation-duration: 0.2s;
    }
    
    body:not(.elementor-editor-active) #split-this{
        opacity:0;
    }
    
     body:not(.elementor-editor-active) #split-this.show{
         opacity:1;
     }
    
    #split-this .char{
        opacity: 0;
    }
    
    #split-this.show .char{
        animation: showChar;
        animation-duration: var(--char-animation-duration);
        animation-fill-mode: forwards;
        animation-delay: calc(var(--char-delay) * var(--char-index));
    }
    
    @keyframes showChar{
        0%{
            opacity: 0;
            transform: translateX(var(--offset)) rotate(var(--rotation));
        }
        100%{
            opacity: 1;
            transform: translateX(0) rotate(0);
        }
    }
   
    
   
</style>

Downloads

Note: Depending on your Browser, JSON files may open in your Browser when clicked. To save the JSON, Right-click the “download” link, click “save link as”.

DescriptionAction
Code Snippet to enqueue js-loader.min.js