the scale property (anime.js) is not applied on my page

Question

When using amine.js, scale does not work for me, in theory, the text should take first scale: 0.5 after letterSpacing: "10px" and return scale: 1 letterSpacing: "6px" But only letterspacing work scale does not manifest itself in any way on the page

code: html

<div class="text-animation">
            <div class="anime-el">
                <div class="animate-me">
                    studen<span class="acc">t</span>.league.ru
                </div>
                <div class="animate-me">
                    le<span class="acc">a</span>gue.student.ru
                </div>
                <div class="animate-me">
                    student.<span class="acc">l</span>eague.ru
                </div>
                <div class="animate-me">
                    league.stud<span class="acc">e</span>nt.ru
                </div>
                <div class="animate-me">
                    stude<span class="acc">n</span>t.league.ru
                </div>
                <div class="animate-me">
                    league.studen<span class="acc">t</span>.ru
                </div>
                <div class="animate-me">
                    student.lea<span class="acc">g</span>ue.ru
                </div>
                <div class="animate-me">
                    le<span class="acc">a</span>gue.student.ru
                </div>
                <div class="animate-me">
                    student.<span class="acc">l</span>eague.ru
                </div>
                <div class="animate-me">
                    l<span class="acc">e</span>ague.student.ru
                </div>
            </div>
        </div>

js

<script type="module">
        import Letterize from "https://cdn.skypack.dev/letterizejs@2.0.0";
            const test = new Letterize({
                targets: ".animate-me"
            });

            const animation = anime.timeline({
                targets: test.listAll,
                delay: anime.stagger(100, {
                    grid: [test.list[0].length, test.list.length],
                    from: "center"
                }),
                loop: true
            });

            animation
                .add({
                    scale: 0.5
                })
                .add({
                    letterSpacing: "10px"
                })
                .add({
                    scale: 1
                })
                .add({
                    letterSpacing: "6px"
                });
    </script>

Thanks!

score 1 · Answer 1 · answered May 06 '21 at 22:51

Letterize.js injects spans around the letters, and spans are display: inline.

This is the problem because transform properties only apply to display: inline-block and display: block elements.

To fix this issue I added some css that styles the injected spans as inline-block

.animate-me span {
  display: inline-block;
}

Check it out here: https://codesandbox.io/s/sweet-river-hu17u?file=/index.html

More details on why inline elements can't be transformed: https://stackoverflow.com/a/33305348/8239711

the scale property (anime.js) is not applied on my page

1 Answers1