https://klesmer-musik.de/wp-content/themes/pbn_template/pages_js/scroll_animating.js?ver=1790321835

1const randomNumber=(min, max)=>{
2  let rand = min - 0.5 + Math.random() * (max - min + 1);
3  return Math.round(rand);
4}
5
6
7const animSet = (blockToAnimate)=>{
8  switch(blockToAnimate.dataset.effect){
9    case 'Slide':
10      gsap.fromTo(blockToAnimate, {
11        y:200,
12        opacity: 0
13      }, {
14        duration: blockToAnimate.dataset.animduration,
15        delay: blockToAnimate.dataset.delay,
16        y:0,
17        opacity: 1,
18      });
19      break;
20    case 'Fade':
21      gsap.fromTo(blockToAnimate, {
22        opacity: 0
23      }, {
24        duration: blockToAnimate.dataset.animduration,
25        opacity: 1
26      });
27      break;
28    case 'Mosaic':
29      gsap.fromTo(blockToAnimate, {
30        x:randomNumber(500, -500),
31        y:randomNumber(0, 300),
32        opacity: 0,
33      }, {
34        duration: blockToAnimate.dataset.animduration,
35        x:0,
36        y:0,
37        opacity: 1,
38      });
39      break;
40  }
41}
42
43//direct position of block
44const offset = (el) => {
45    var rect = el.getBoundingClientRect(),
46    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
47    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
48    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
49}
50
51const animAdd = (elementToCheck) => {
52  if (elementToCheck) {
53    let elementToCheckAnimElements = Array.from(elementToCheck.querySelectorAll('._to-animate'));
54    elementToCheckAnimElements.forEach(animElement => {
55      if (!(animElement.classList.contains('_animated'))){
56        animElement.classList.add('_animated');
57        animSet(animElement)      
58      }
59    });
60  }
61}
62const HEADER = document.querySelector('.header');
63let mainPart = document.querySelector('.main');
64let HEIGHT_OF_WINDOW = window.innerHeight;
65const MAIN_PAGE_HEIGHT = HEADER.offsetHeight + mainPart.offsetHeight;
66let appeareIndex = 300;
67let blocksToAppeare = Array.from(document.querySelectorAll('._to-animate'));
68window.addEventListener('scroll', () => {
69  blocksToAppeare.forEach(block => {
70    if (pageYOffset >= offset(block)['top'] - HEIGHT_OF_WINDOW + appeareIndex) {
71      if (!(block.classList.contains('_animated'))){
72        block.classList.add('_animated');
73        animSet(block)
74      }
75    }else if(pageYOffset>=MAIN_PAGE_HEIGHT){
76      if (!(block.classList.contains('_animated'))){
77        block.classList.add('_animated');
78        animSet(block)
79      }
80    }
81  });
82});
83
84if (pageYOffset >= 0) {
85  const HERO = document.querySelector('.hero');
86  const ABOUT_FIRST_SECTION = document.querySelector('#about-first');
87  const PAGE_FIRST_SECTION = document.querySelector('.page-content');
88  const FOOTER = document.querySelector('footer');
89  const PAGE_HEIGHT = HEADER.offsetHeight + mainPart.offsetHeight + FOOTER.offsetHeight;
90  animAdd(HEADER);
91  animAdd(HERO);
92  animAdd(ABOUT_FIRST_SECTION);
93  animAdd(PAGE_FIRST_SECTION);
94
95  if (HEIGHT_OF_WINDOW == PAGE_HEIGHT) {
96    let footerElements = Array.from(FOOTER.querySelectorAll('._to-animate'));
97    footerElements.forEach(animElement => {
98      animElement.classList.add('_animated');
99      animSet(animElement);
100    });
101  }
102}
103