1// http://pavlyukpetr.github.io/motion-css//documentation.html
2// https://api.jquery.com/scroll/
3// https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
4// https://cssanimation.rocks/scroll-animations/
5jQuery(window).scroll(function () {
6    jQuery('[data-cs-animate]').each(function () {
7
8        // Position of the element
9        const elPosition = jQuery(this).offset().top;
10        // Height of the element
11        const elHeight = jQuery(this).height();
12        // Top of the window
13        const windowTop = jQuery(window).scrollTop();
14        // Height of the window
15        const windowHeight = jQuery(window).height();
16
17
18        // adds the class when the element is fully in the visible area of the window
19        if (elPosition < windowTop + windowHeight - elHeight) {
20            jQuery(this).addClass("animation fade-in");
21        }
22        // removes the class when the element is not visible in the window
23        if (elPosition > windowTop + windowHeight) {
24            jQuery(this).removeClass("animation fade-in");
25        }
26        // removes the class when the element is not visible in the window
27        if (elPosition + elHeight < windowTop) {
28            jQuery(this).removeClass("animation fade-in");
29        }
30    });
31});
32
33
34// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
35const callback = function(entries) {
36    entries.forEach(entry => {
37        entry.target.classList.toggle("is-visible");
38    });
39};
40
41let options = {
42    root: document.querySelector('#scrollArea'),
43    rootMargin: '0px',
44    threshold: 1.0
45}
46const observer = new IntersectionObserver(callback, options);
47
48const targets = document.querySelectorAll(".show-on-scroll");
49targets.forEach(function(target) {
50    observer.observe(target);
51});
52
53
54