https://sheatheater.org/RFAssets/js/animSections.js

1// add fade-anim-start class to any fade anim div
2let animFadeNum = 600;
3let animFadeBlockNum = 800;
4function imageAnimUp(el){
5  let fade = document.getElementById(el);
6  fade.classList.add('fade-up-start')
7  let fadeNum = fade.scrollTop -= animFadeNum;
8  window.addEventListener('scroll', () => {
9    if(window.scrollY >= fadeNum){
10      fade.classList.add('fade-up-anim');
11    };
12  });
13  if(window.scrollY >= num){
14    fade.classList.add('fade-up-anim');
15  };
16};
17function imageAnimSide(firstEl, secondEl){
18  let first = document.getElementById(firstEl);
19  let second = document.getElementById(secondEl);
20  first.classList.add('fade-left-start');
21  second.classList.add('fade-right-start');
22  let firstNum = (first.offsetTop -= animFadeNum) - 100;
23  let secondNum = second.offsetTop -= animFadeNum;
24  window.addEventListener('scroll', () => {
25    if(window.scrollY >= firstNum){
26      first.classList.add('fade-left-anim');
27    };
28    if(window.scrollY >= secondNum){
29      second.classList.add('fade-right-anim');
30    };
31  });
32  if(window.scrollY >= firstNum){
33    first.classList.add('fade-left-anim');
34  };
35  if(window.scrollY >= secondNum){
36    second.classList.add('fade-right-anim');
37  };
38};
39function seperateAnimUp({ els: els }){
40  function doElements(){
41    els.forEach(el => {
42      let elem = document.getElementById(el);
43      elem.classList.add('fade-up-start');
44      elem.classList.add('fade-up-anim-s');
45      if(window.scrollY >= (elem.offsetTop - animFadeBlockNum)){
46        makeElemAnim();
47      }
48    });
49  };
50  function windowScroll(){
51    window.addEventListener('scroll', function(){
52      makeElemAnim();
53    });
54  };
55  function makeElemAnim(){
56    let num = 0;
57    els.forEach(e => {
58      let elem = document.getElementById(e);
59      if(elem.classList.contains('fade-up-start')){
60        if(window.scrollY >= (elem.offsetTop - animFadeBlockNum)){
61          elem.setAttribute('style', 'animation-delay:' + num + 's;' + 'animation-name: animBlocks');
62        }
63      };
64      num = num += 0.5;
65    });
66  };
67  doElements();
68  windowScroll()
69};