Animated letters with anim.js

mars 2020 (last edited mars 2023)

Animated letters with anim.js

This title is animated with the impressive anim.js plugin.
Many other animation examples on Tobias Ahlin's website.

Sunny mornings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<h1 class="ml2">Sunny mornings</h1>

CSS

.ml2 {
    padding: .2em;
    font-weight: 900;
    font-size: 3.5em;
    text-align: center;
    color: white;
}

.ml2 .letter {
    display: inline-block;
    line-height: 1em;
}

jQuery(function($) {

    // Wrap every letter in a span
    var textWrapper = document.querySelector('.ml2');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline({loop: true})
        .add({
            targets: '.ml2 .letter',
            scale: [4,1],
            opacity: [0,1],
            filter: ['blur(20px)', 'blur(0px)'],
            translateZ: 0,
            easing: "linear",
            duration: 950,
            delay: function(el, i) {
                return 70*i;
            },
        })
        .add({
            targets: '.ml2',
            opacity: 0,
            duration: 1000,
            easing: "easeOutExpo",
            delay: 1000
        });

});

ACTUALITÉS EN RELATION :

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Animated letters with anim.js

Animated letters with anim.js

Sunny mornings

WP Gridbuilder Facets for BB Posts module (WPGB add-on)

WP Gridbuilder Facets for BB Posts module (custom)

Format numbers

Custom columns

Custom Tabs module

Slanted row edges

Open posts grid featured images in lightbox

Animated letters with anim.js

QA Accordion Grid

Clickable row with JS

Reveal elements on scroll with Waypoints

Panorama with Paver

CSS animation

CSS visual effects

Categories grid with Custom Content Shortcode

Beaver Builder custom module: Photo Swap

Bootstrap plugins

WooCommerce

Menu modules

Highlight menu items on a One Page

Beaver Builder: hide row if empty field connection

Ajax Search in modal box