window.addEventListener("load", function(event) {
    console.log("load");
    gsap.set(".demo", { autoAlpha:1 });
    init();	
}); 

function init() {
    const hole = document.querySelector(".hole")
    const herman = document.querySelector(".hermanWrapper img")
    const shadow = document.querySelector(".shadow")
    const tl = gsap.timeline({repeat:-1, yoyo:true, repeatDelay:0.5})
    
    tl.from(hole, {scale:0, repeat:1, yoyo:true})
      .fromTo(herman, {y:160, scaleY:2}, {y:-175, scaleY:1}, 0.2)
      .to(herman, {y:0, ease:"power1.in"}, "0.7")
      .to(herman, {scaleY:0.8, scaleX:1.3, transformOrigin:"50% 100%", repeat:1, 
          yoyo:true, duration:0.2})
      .to(shadow, {opacity:1, duration:0.2}, 0.7)    
      .to(shadow, {scaleX:0.7, ease:"power1.in"}, 0.7)
}