cssのtransformをjsで制御する方法を教えて頂きたいです

Question

https://www.lotte.co.jp/entertainment/ghana-pinkvalentine/
このロッテのサイトなのですが、ウィンドウの読み込みが完了すると、女の子や背景やタイトルがフェイドインする動きになっています。
どのような記述になっているのか検証ツールで覗いてみたのですが、タイトルのみ抽出すると下記の記述がありました。

<article id="hero">
    <h1><img src="assets/img/hero/title.png" alt="ピンクバレンタイン"></h1>
</article>

.load-complete #hero h1 {
    opacity: 1 !important;
    -webkit-transform: translate(0, 0) scale(1) rotate(0deg) !important;
    transform: translate(0, 0) scale(1) rotate(0deg) !important;
}

#hero h1 {
    -webkit-transition: opacity 0.2s linear,-webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 0.2s linear,-webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 0.2s linear,transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: opacity 500ms linear 0s, transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, -webkit-transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 500ms;
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

transformとtransitionを使用して動きを付けているのは分かりましたが、当然これをそのままローカルにコピペしても動きませんでした。
それではjsで制御しているのかと思い、読み込まれているmain.min.js?20200111の中身を全てコピペしてみたら無事に動きました。

そこで質問なのですが、これはjsのどのように記述で動いているのか教えて頂きたいです。
cssを見るに.load-completeという記述があるので、それ絡みかと思いjsで検索してみると、下記の記述が見つかりました。

function p() {
            t.classList.add("load-complete");
            const n = e ? .7 : .9;
            l.setup({
                step: "article, section, #profile li",
                offset: n,
                once: !0
            }).onStepEnter((function(t) {
                t.element.classList.add("inviewed")
            }
            ))
        }

浅学なためjsが分からないのですが、この部分のみをコピペしても動きませんでした。
私のjsの読解力がないのが最たる原因なのですが、動いているロジックだけでも教えて頂ければ幸いです。

宜しくお願い致します。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

transitionは変化をアニメーションするものなので、変化がないとアニメーションしません。
なので、何かをトリガーにしてclass属性を変化させるなどする必要があります。

ご提示のJavaScriptは「呼び出されたときにclass属性を変化させる」というものなので、何かをトリガーにして呼び出してやらなくてはいけません。
この場合、ページが表示されたときにアニメーションするのですから、トリガーは「ページが表示されたとき」にするのがいいかと思います。
そういう機能を、JavaScriptで使うことができます。

DOMContentLoaded イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。

Window: DOMContentLoaded イベント - Web API | MDN

ということで、

window.addEventListener('DOMContentLoaded', p);

とすればいいんじゃないかと思います。

Comments

[Lhankor_Mhy]

付け加えると、l と t には何かが入っていなくてはいけないので、そこらへんをきちんとしないといけないと思います。
l の方は、メソッド名から、↓これではないかと思います。
https://github.com/russellgoldenberg/scrollama#scrollamajs

[nyoro]

すいません、できました！ありがとうございます...！！この書き方だと動かなかったのですが、ロードして発火させるという発想から、ページを読み込んだらクラスを付与させるという書き方で出来ました。