I’m trying to use Scrollmagic to create an animation that displays text character by character.

I want to create a scene using a for loop, but it doesn’t work.

HTML

    <p class="letter">
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    </p>

JS (Doesn’t work)

    var letterElements = document.getElementsByClassName("letter");
    for (var n=0; n < letterElements.length; n++) {
        var scene = new ScrollMagic.Scene({
            triggerElement: letterElements[n],
            triggerHook:0.8,
            offset:100,
            reverse:false
        })
        .on("enter", function (event) {
            $('.letter').eq(n).children('span').each(function(i) { //Maybe this line is the problem
                $(this).delay(20 * i).queue(function() {
                    $(this).addClass('visible').dequeue();
                });
            });
        })
        .addTo(controller);

}

JS (Work)

It works when I write the following without using the for loop.

    var scene = new ScrollMagic.Scene({
        triggerElement: letterElements[0],
        triggerHook:0.8,
        offset:100,
        reverse:false
    })
    .on("enter", function (event) {
        $('.letter').eq(0).children('span').each(function(i) {
            $(this).delay(20 * i).queue(function() {
                $(this).addClass('visible').dequeue();
            });
        });
    })
    .addTo(controller);
    
    var scene = new ScrollMagic.Scene({
        triggerElement: letterElements[1],
        triggerHook:0.8,
        offset:100,
        reverse:false
    })
    .on("enter", function (event) {
        $('.letter').eq(1).children('span').each(function(i) {
            $(this).delay(20 * i).queue(function() {
                $(this).addClass('visible').dequeue();
            });
        });
    })
    .addTo(controller);
    
    ・
    ・
    ・
    ・