https://scheldebrouwerij.com/wp-content/themes/scheldebrouwerij/custom/page-boxes.js?ver=1.4.1

1// Animation for the cardboard box
2function cardboxAnimations(){
3  anime.set('.cardbox-flap',  {perspective: 2500, filter: 'brightness(1)'});
4  anime.set('.cardbox-flap.flap3',  {filter: 'brightness(.75)'});
5  anime.set('.flaps-shadow-wrap',  {translateZ: 200});
6  anime.set('.flap-wrap1',  {translateZ: 201});
7
8  function flapWiggle(target,o){
9
10    if(o == 'X'){
11      anime({
12        targets: target,
13        rotateX: ['-=2.5','+=2.5','-=2','+=2','-=1','+=1','-=.5','+=.5'],
14        easing: 'easeInOutSine',
15        duration: 2500,
16      })
17    } else {
18      anime({
19        targets: target,
20        rotateY: ['-=2.5','+=2.5','-=2','+=2','-=1','+=1','-=.5','+=.5'],
21        easing: 'easeInOutSine',
22        duration: 2500,
23      })
24    }
25  }
26
27
28  anime({
29    targets: '.cardbox-flap.flap1',
30    rotateX: 252.5,
31    duration: 2000,
32    filter: ['brightness(' + 1 + ')','brightness(' + .6 + ')',,'brightness(' + 1.1 + ')'],
33    easing: 'easeInOutSine',
34    update: function(anim){
35      if(anim.progress > 40){
36        anime.set(['.cardbox-logo','.cardbox-boxtitle'], {opacity: 0});
37      }
38    },
39    complete: function(anim){
40      flapWiggle(anim.animatables[0].target,'X');
41      anime.set('.flap-wrap1', {translateZ: 0});
42    }
43
44  });
45
46  anime({
47    targets: '.cardbox-flap.flap2',
48    rotateX: -256.5,
49    duration: 2000,
50    filter: ['brightness(' + 1 + ')','brightness(' + .6 + ')'],
51    easing: 'easeInOutSine',
52    complete: function(anim){
53      flapWiggle(anim.animatables[0].target,'X');
54    }
55  })
56
57  anime({
58    targets: '.cardbox-flap.flap3',
59    rotateY: -260,
60    duration: 2000,
61    filter: ['brightness(' + .75 + ')','brightness(' + 1.1 + ')',,'brightness(' + .6 + ')'],
62    delay: 650,
63    easing: 'easeInOutSine',
64    update: function(anim){
65      if(anim.progress > 35){
66        anime.set('.flap-wrap2',  {translateZ: 203, zIndex: 4});
67      }
68    },
69    complete: function(anim){
70      flapWiggle(anim.animatables[0].target,'Y');
71      anime.set('.flap-wrap2',  {translateZ: 0});
72    }
73  });
74
75  anime({
76    targets: '.cardbox-flap.flap4',
77    rotateY: 255,
78    duration: 2000,
79    filter: ['brightness(' + .8 + ')','brightness(' + 1 + ')'],
80    delay: 650,
81    easing: 'easeInOutSine',
82    complete: function(anim){
83      flapWiggle(anim.animatables[0].target,'Y');
84    }
85  })
86
87  anime({
88    targets: '.cardbox-shadow',
89    duration: 2000,
90    opacity: [.6,0],
91    delay: 200,
92    easing: 'easeInOutSine',
93  })
94
95  anime({
96    targets: '.cardbox-title',
97    duration: 2000,
98    textShadow: ['-25px 25px 7.5px rgba(0,0,0,0)','-25px 25px 7.5px rgba(0,0,0,.25)'],
99    delay: 200,
100    easing: 'easeInOutSine',
101  })
102
103  anime({
104    targets: '.flaps-shadow.flaps-shadow1',
105    translateY: '-100%',
106    duration: 800,
107    delay: 200,
108    easing: 'easeInCubic',
109    complete: function(){
110      anime.set('.flaps-shadow-wrap',  {translateZ: 0});
111    }
112  })
113
114  anime({
115    targets: '.flaps-shadow.flaps-shadow2',
116    translateY: '100%',
117    duration: 800,
118    delay: 200,
119    easing: 'easeInCubic',
120  })
121
122  anime({
123    targets: '.flaps-shadow.flaps-shadow3',
124    translateX: '-100%',
125    duration: 800,
126    delay: 950,
127    easing: 'easeInCubic',
128  })
129
130  anime({
131    targets: '.flaps-shadow.flaps-shadow4',
132    translateX: '100%',
133    duration: 800,
134    delay: 950,
135    easing: 'easeInCubic',
136  })
137
138  anime({
139    targets: '.box-controls',
140    opacity: [0,1],
141    duration: 800,
142    delay: 950,
143    easing: 'easeInCubic',
144  })
145}
146
147
148// if the age cookie is already set, we can do the cardbox animation immediatly
149if( getCookie('ageCookie') && document.body.dataset.page == 'page-boxes' ) {
150  setTimeout(cardboxAnimations,500);
151}
152
153
154
155// On click boxes XL button
156document.addEventListener("change", function( event ) {
157  if ( !event.target.closest('.xl-checkbox') ) return;
158
159  let xlCheckbox = event.target.closest('.xl-checkbox');
160  let targetBox = xlCheckbox.closest('.box-list-item');
161
162  if(xlCheckbox.checked) {
163    targetBox.querySelectorAll('.reg-box-target').forEach((target, i) => {
164      target.classList.add('hide');
165    });
166    targetBox.querySelectorAll('.xl-box-target').forEach((target, i) => {
167      target.classList.remove('hide');
168    });
169  }
170  else {
171    targetBox.querySelectorAll('.reg-box-target').forEach((target, i) => {
172      target.classList.remove('hide');
173    });
174    targetBox.querySelectorAll('.xl-box-target').forEach((target, i) => {
175      target.classList.add('hide');
176    });
177  }
178});
179
180
181
182
183/*
184* Show the boxes inview
185*/
186document.addEventListener('inviewBoxList', function (event) {
187  // the element that triggered the event
188  let elem = event.target;
189
190  // on enter
191  if( elem.classList.contains('enter') && !elem.getAttribute('data-shown') ) {
192    anime({
193      targets: elem,
194      translateY: ['4rem', 0],
195      opacity: 1,
196      duration: 500,
197      easing: 'easeOutCirc'
198    });
199
200    elem.setAttribute('data-shown', 'true');
201  }
202}, false);