https://qpurpose.dk/static/editor-loadable-scripts/animationWatcher.js?v=1790693284440

1(() => {
2  const common = window?.brickSite?.common;
3  if (!common) {
4    return;
5  }
6  var observer = null;
7
8  const animations = {
9    fade: {
10      inView: {
11        opacity: 1,
12      },
13      outOfView: {
14        opacity: 0,
15      },
16    },
17    fadeRight: {
18      inView: {
19        opacity: 1,
20        transform: 'translateX(0px)',
21      },
22      outOfView: {
23        opacity: 0,
24        transform: 'translateX(50px)',
25      },
26    },
27    fadeLeft: {
28      inView: {
29        opacity: 1,
30        transform: 'translateX(0px)',
31      },
32      outOfView: {
33        opacity: 0,
34        transform: 'translateX(-50px)',
35      },
36    },
37    fadeUp: {
38      inView: {
39        opacity: 1,
40        transform: 'translateY(0px)',
41      },
42      outOfView: {
43        opacity: 0,
44        transform: 'translateY(50px)',
45      },
46    },
47    fadeDown: {
48      inView: {
49        opacity: 1,
50        transform: 'translateY(0px)',
51      },
52      outOfView: {
53        opacity: 0,
54        transform: 'translateY(-50px)',
55      },
56    },
57  };
58
59  function applyAnimationStyling(element, inView) {
60    const { animationType } = element.dataset;
61
62    const styles = animations[animationType][inView ? 'inView' : 'outOfView'];
63
64    Object.keys(styles).forEach((key) => {
65      element.style[key] = styles[key];
66    });
67  }
68
69  const handleScript = () => {
70    //Disconnect observer to better predict script behaviour
71    if (observer) observer.disconnect();
72
73    // Grab all relevant elements from DOM
74    const elems = common.document.querySelectorAll('[data-animation-type]');
75
76    //Apply "out of view" styling on all relevant elements
77    elems.forEach((element) => {
78      applyAnimationStyling(element, false);
79    });
80
81    const observerOptions = {
82      root: null, // Null = based on viewport
83      rootMargin: '0px', // Margin for root if desired
84      threshold: 0.2, // Percentage of visibility needed to execute function
85    };
86
87    function observerCallback(entries) {
88      entries.forEach(({ target, isIntersecting }) => {
89        const { animationType } = target.dataset;
90        if (!animationType) observer.unobserve(target);
91
92        switch (isIntersecting) {
93          case false:
94            applyAnimationStyling(target, false);
95            break;
96          case true:
97            applyAnimationStyling(target, true);
98            break;
99        }
100      });
101    }
102
103    // Call function for each element
104
105    observer = new IntersectionObserver(observerCallback, observerOptions);
106
107    elems.forEach((el) => {
108      applyAnimationStyling(el, false);
109      observer.observe(el);
110    });
111  };
112
113  common.document.addEventListener('reloadAnimations', handleScript);
114  handleScript();
115})();