blob: 00d285f49e1f161441fbb01758518f68e1ab001f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
/*
Add intersection observer to trigger animation when visible.
*/
$(document).ready(function () {
const animObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.querySelectorAll('.anim').forEach((animated) => {
/* TODO: rewrite to handle a list of animations, instead of hardcoded 'if...else if' */
const classes = animated.classList;
if (classes.contains('zoomIn')) {
if (entry.isIntersecting) {
if (!classes.contains('anim-in')) {
animated.classList.add('anim-in');
}
} else {
/* TODO: remove this 'else' block if want only triggered once */
if (classes.contains('anim-in')) {
animated.classList.remove('anim-in');
}
}
} else if (classes.contains('slideLeft')) {
if (entry.isIntersecting) {
if (!classes.contains('anim-left')) {
animated.classList.add('anim-left');
}
} else {
/* TODO: remove this 'else' block if want only triggered once */
if (classes.contains('anim-left')) {
animated.classList.remove('anim-left');
}
}
} else if (classes.contains('slideRight')) {
if (entry.isIntersecting) {
if (!classes.contains('anim-right')) {
animated.classList.add('anim-right');
}
} else {
/* TODO: remove this 'else' block if want only triggered once */
if (classes.contains('anim-right')) {
animated.classList.remove('anim-right');
}
}
}
});
});
});
document.querySelectorAll('.anim-wrapper').forEach((wrapper) => {
animObserver.observe(wrapper);
});
})
|
