Animate elements in a web page by applying a sequence of timed additions/removals of classes to elements.

animation_scheduler.js

// Future enhancement, make animation steps arrays, to apply multiple simultaneous transitions to multiple elements
//
// animation elements:
//     0: number of tenths of a second after previous animation element
//     1: add or remove
//     2: classname
//     3: element identifier
//
const add       =  1;
const remove    = -1;
const interval  =  0;
const op        =  1;
const classname =  2;
const element   =  3;

var animations = [
    [20, add,    'a_h1', '.h1924'],
    [10, add,    'a_line', '#text_a .line_1'],
    [10, add,    'a_line', '#text_a .line_2'],
    [10, add,    'a_line', '#text_a .line_3'],
    [10, add,    'a_line', '#text_a .line_4'],

    [10, add,    'a_white', '#text_a .line_1'],
    [20, remove, 'a_white', '#text_a .line_1'],
    [ 1, add,    'a_white', '#text_a .line_2'],
    [20, remove, 'a_white', '#text_a .line_2'],
    [ 1, add,    'a_white', '#text_a .line_3'],
    [20, remove, 'a_white', '#text_a .line_3'],
    [ 1, add,    'a_white', '#text_a .line_4'],
    [20, remove, 'a_white', '#text_a .line_4'],

    [40, remove, 'a_h1', '.h1924'],
    [ 1, add,    'a_h1_out', '.h1924'],
    [20, add,    'a_h1', '.splinterton'],
    [30, add,    'card_is_120', '.card'],
    [10, add,    'a_line', '#text_b .line_1'],
    [10, add,    'a_line', '#text_b .line_2'],
    [10, add,    'a_line', '#text_b .line_3'],
    [10, add,    'a_line', '#text_b .line_4'],

    [10, add,    'a_white', '#text_b .line_1'],
    [20, remove, 'a_white', '#text_b .line_1'],
    [ 1, add,    'a_white', '#text_b .line_2'],
    [20, remove, 'a_white', '#text_b .line_2'],
    [ 1, add,    'a_white', '#text_b .line_3'],
    [20, remove, 'a_white', '#text_b .line_3'],
    [ 1, add,    'a_white', '#text_b .line_4'],
    [20, remove, 'a_white', '#text_b .line_4'],

    [99, add,    'card_is_240', '.card'],
    [10, add,    'a_line', '#text_c .line_1'],
    [10, add,    'a_line', '#text_c .line_2'],
    [10, add,    'a_line', '#text_c .line_3'],
    [10, add,    'a_line', '#text_c .line_4'],

    [10, add,    'a_white', '#text_c .line_1'],
    [20, remove, 'a_white', '#text_c .line_1'],
    [ 1, add,    'a_white', '#text_c .line_2'],
    [20, remove, 'a_white', '#text_c .line_2'],
    [ 1, add,    'a_white', '#text_c .line_3'],
    [20, remove, 'a_white', '#text_c .line_3'],
    [ 1, add,    'a_white', '#text_c .line_4'],
    [20, remove, 'a_white', '#text_c .line_4'],

];

var animation_timer = 0; // counts deci-seconds
var next_event_time = animations[0][interval];
var animation_index = 0; // where we are in the list
const animation_length = animations.length;

var timerId = setInterval( animate, 100 );

function animate(){
    var anim;
    animation_timer++;

    if( animation_timer >= next_event_time ){
        anim = animations[animation_index];
        var el = document.querySelector(anim[element]);

        if( anim[op] == add ){
            el.classList.add( anim[classname] );
        } else {
            el.classList.remove( anim[classname] );
        }
        animation_index++;

        if( animation_index >= animation_length ){
            clearInterval( timerId );
        } else {
            next_event_time += animations[animation_index][interval];
        }
    }
}