https://lakeshorearts.ca/wp-content/themes/norebro-child/src/js/artistcall.js

1// import anime from 'animejs'
2
3document.addEventListener("DOMContentLoaded", () =>  {  
4if (document.querySelector(".page-id-2090")) {
5  let artistCall = document.querySelector("#artist-bg")
6
7for (let i = 0; i < 42; i++) {
8  let div = document.createElement("div")
9  artistCall.appendChild(div).classList.add("shape")
10}
11
12let shapes = document.querySelectorAll(".shape")
13
14let circle = `<svg width="40" height="40">
15<circle cx="20" cy="20" r="10" stroke="rgba(255,255,255, .5)" stroke-width="2" fill="none" />
16</svg>`
17
18let cross =  `<svg width="50px" height="50px" viewBox="0 0 50 50"">
19<g id="Group" fill="#F8F8F8" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
20    <path d="M48.499987,45.1117644 L27.8802321,24.4920094 L48.209568,4.06586718 C48.7258727,3.54956245 48.9840189,2.98486384 48.9840189,2.37175276 C48.9840189,1.75864787 48.7258727,1.22621598 48.209568,0.774450891 C47.6932632,0.258146167 47.1124313,0 46.4670535,0 C45.8216757,0 45.2731104,0.258146167 44.8213453,0.774450891 L24.4920094,21.0069804 L4.35628626,0.968063614 C3.90452118,0.451758889 3.33982257,0.193612723 2.66217494,0.193612723 C1.98452731,0.193612723 1.4198287,0.451758889 0.968063614,0.968063614 C0.451760438,1.48436834 0.193612723,2.06520031 0.193612723,2.71057812 C0.193612723,3.35595593 0.451760438,3.90452118 0.968063614,4.35628626 L21.0069804,24.3952031 L0.774450891,44.8213453 C0.258147715,45.2731104 0,45.8216744 0,46.4670535 C0,47.1124325 0.258147715,47.6609965 0.774450891,48.1127616 C1.22621598,48.5645269 1.77477999,48.7904061 2.42015903,48.7904061 C3.06553808,48.7904061 3.61410209,48.5645269 4.06586718,48.1127616 L24.4920094,27.7834257 L45.1117644,48.4031807 C45.6280691,48.9194839 46.2089011,49.1776316 46.8542789,49.1776316 C47.4996567,49.1776316 48.048222,48.9194839 48.499987,48.4031807 C48.9517521,47.9514156 49.1776316,47.4028516 49.1776316,46.7574725 C49.1776316,46.1120935 48.9517521,45.5635295 48.499987,45.1117644 Z" id="Page-1-Copy-11"></path>
21</g>
22</svg>`
23
24
25for (let shape of shapes) {
26  shape.innerHTML = cross
27}
28
29anime({
30  targets: shapes,
31  opacity: [0, 1],
32  translateY: [-5, 0],
33  duration: 4200,
34  delay: (el, i, l) => i * 75,
35  direction: 'alternate',
36  loop: true
37});
38
39}
40
41})
42