https://pupwife.com/projects/chatroom/scripts/messageAnimations.js

1/**
2 * Message arrival animations (toggle via Settings → Enable Animations)
3 */
4window.ChatroomMessageAnimations = (function () {
5    'use strict';
6
7    const ARRIVE_CLASS = 'message--arriving';
8
9    function animationsEnabled() {
10        return document.documentElement.classList.contains('animations');
11    }
12
13    function play(messageEl) {
14        if (!messageEl || !animationsEnabled()) return;
15
16        messageEl.classList.remove(ARRIVE_CLASS);
17        void messageEl.offsetWidth;
18        messageEl.classList.add(ARRIVE_CLASS);
19
20        const onEnd = function (e) {
21            if (e.target !== messageEl || e.animationName !== 'cr-message-glow') return;
22            messageEl.classList.remove(ARRIVE_CLASS);
23            messageEl.removeEventListener('animationend', onEnd);
24        };
25        messageEl.addEventListener('animationend', onEnd);
26        window.setTimeout(function () {
27            messageEl.classList.remove(ARRIVE_CLASS);
28        }, 950);
29    }
30
31    function playAfterInsert(messageEl) {
32        if (!messageEl) return;
33        requestAnimationFrame(function () {
34            requestAnimationFrame(function () {
35                play(messageEl);
36            });
37        });
38    }
39
40    return {
41        play: play,
42        playAfterInsert: playAfterInsert
43    };
44})();