emergence.js と anime.js の併用デモ（最適化版）

function updateDebugInfo(message) {
    console.log(message);
    document.getElementById('debug-text').textContent = message;
}

const animatedElements = new Set();

document.addEventListener('DOMContentLoaded', function() {
    updateDebugInfo('DOMContentLoaded: ページ読み込み完了');

    if (typeof emergence === 'undefined' || typeof anime === 'undefined') {
        updateDebugInfo('エラー: 必要なライブラリが読み込まれていません');
        return;
    }

    emergence.init({
        container: window,
        throttle: 250,
        debounce: 50,
        reset: false,
        handheld: true,
        elemCushion: 0.1,
        offsetTop: 0,
        offsetRight: 0,
        offsetBottom: 0,
        offsetLeft: 0,
        callback: function(element, state) {
            if (state === 'visible' && !animatedElements.has(element)) {
                animatedElements.add(element);
                updateDebugInfo('Emergence: 要素が表示 - ' + element.textContent);
                anime({
                    targets: element,
                    opacity: [0, 1],
                    translateY: [50, 0],
                    rotate: [45, 0],
                    scale: [0.5, 1],
                    easing: 'easeOutExpo',
                    duration: 1000,
                    begin: function(anim) {
                        updateDebugInfo('Anime: アニメーション開始 - ' + element.textContent);
                    },
                    complete: function(anim) {
                        updateDebugInfo('Anime: アニメーション完了 - ' + element.textContent);
                    }
                });
            }
        }
    });

    updateDebugInfo('emergence.init 完了');
});

let scrollTimeout;
window.addEventListener('scroll', function() {
    updateDebugInfo('スクロール中');
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(function() {
        emergence.engage();
    }, 100);
});

window.addEventListener('load', function() {
    setTimeout(function() {
        emergence.engage();
    }, 1000);
});