https://cmief.ca/wp-content/themes/adnetframework/extensions/anima…/js/scrollObserver-custom-class.js

1window.addEventListener('load', function() {
2
3// global options
4
5let duration = 1500;
6let prevratio = 0.0;
7
8// observer options
9let observeroptions = {
10    
11    root: document.querySelectorAll('.ani-container')[0],
12    rootmargin: "-200px 0px -200px 0px",
13    threshold: buildthresholdlist()
14};
15
16// threshold list
17function buildthresholdlist() {
18
19    let thresholds = [];
20    let numsteps = 20;
21  
22    for (let i=1.0; i<=numsteps; i++) {
23
24        let ratio = i/numsteps;
25        thresholds.push(ratio);
26    }
27  
28    thresholds.push(0);
29    return thresholds;
30}
31
32// custom animations
33
34// observers
35let observercustomanimation_01 = new IntersectionObserver(customanimation_01, observeroptions);
36let observercustomanimation_02 = new IntersectionObserver(customanimation_02, observeroptions);
37let observercustomanimation_03 = new IntersectionObserver(customanimation_03, observeroptions);
38let observercustomanimation_04 = new IntersectionObserver(customanimation_04, observeroptions);
39
40// targets
41document.querySelectorAll('.customanimation_01').forEach(element => {
42
43    observercustomanimation_01.observe(element);
44});
45
46document.querySelectorAll('.customanimation_02').forEach(element => {
47
48    observercustomanimation_02.observe(element);
49});
50
51document.querySelectorAll('.customanimation_03').forEach(element => {
52
53    observercustomanimation_03.observe(element);
54});
55
56document.querySelectorAll('.customanimation_04').forEach(element => {
57
58    observercustomanimation_04.observe(element);
59});
60
61// functions
62function customanimation_01(entries) {
63
64    entries.map((entry) => {
65
66        entry.target.classList.add('animate__animated');
67        let translateFactor = (1 - entry.intersectionRatio) * 100;
68
69        entry.target.style.opacity = entry.intersectionRatio;
70        entry.target.style.transform = 'translateY(' + translateFactor + 'px)';
71    });
72}
73
74function customanimation_02(entries) {
75
76    entries.map((entry) => {
77
78        entry.target.classList.add('animate__animated');
79
80        if (entry.isIntersecting) {
81
82            entry.target.classList.add('animate__customanimation_02');
83            
84        } else if (!entry.isIntersecting) {
85
86            entry.target.classList.remove('animate__customanimation_02');
87        }
88    });
89}
90
91function customanimation_03(entries) {
92
93    entries.map((entry) => {
94
95        entry.target.classList.add('animate__animated');
96
97        if (entry.isIntersecting) {
98
99            entry.target.classList.add('animate__customanimation_03');
100            
101        } else if (!entry.isIntersecting) {
102
103            entry.target.classList.remove('animate__customanimation_03');
104        }
105    });
106}
107
108function customanimation_04(entries) {
109
110    entries.map((entry) => {
111
112        entry.target.classList.add('animate__animated');
113
114        if (entry.isIntersecting) {
115
116            entry.target.classList.add('animate__customanimation_04');
117            
118        } else if (!entry.isIntersecting) {
119
120            entry.target.classList.remove('animate__customanimation_04');
121        }
122    });
123}
124
125// unobservers
126// observer.disconnect();
127
128// stop observing #button-01
129// observer.unobserve(document.queryselector("#button-01"));
130
131});