body{
  background:grey;
  height:500vh;
}
#wrapApple{
  position:fixed;
  width:100%;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:1;
}
#apple{
  
}
section{
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  height:100vh;
  font-family:sans-serif;
  font-size:7w;
  font-size: 8vw;
  color: #a7a2a2;
  z-index:2;
}

console.clear();


const options = {
  root: null,
  rootMargin: '0px',
  threshold: Array(100).fill().map((v, i) => i / 100) // important calling 100 times
  // threshold: 1, // calling callback only once when 100% visible
  //threshold: 0, // calling callback only once when 1px visible
  //threshold: [0.2, 0.4, 0.6, 0.8, 1.0], // calling callback 5 times
};
const observer = new IntersectionObserver(animHandler, options);
const targets = document.querySelectorAll("section");
const ar = [].slice.call(targets); 
let animations = [];


let count = 0;
//animations[1] = new TimelineMax({paused:true});  

for (let target of ar) {
  animations[count] = new TimelineMax({paused:true});  
  observer.observe(target);
  count++;
}

// timeline for each section
animations[0]

animations[1].to("#apple",1, {scale:1.4, ease: Sine.easeOut});

animations[2].to("#apple",1, {scale:0.4, ease: Sine.easeOut})
  .to('#small',1,{scale:0.5, transformOrigin:"center"},0)
  .to("#apple, #small",1, {scale:1, ease: Sine.easeOut})

animations[3].to("#apple",5, {rotation:360, ease: Sine.easeOut});

// observer handler
function animHandler(targets, observer) {
  for (var entry of targets) {
    if (entry.isIntersecting) {
      let i = ar.indexOf(entry.target);
      animations.forEach(tl => tl.pause(0));
      
      let isRatio = entry.intersectionRatio;
      //play the progress of the animations in relation to intersectionRatio
      TweenLite.to(animations[i], 0, {progress:isRatio, ease: Power0.easeNone});
 
    } 
  }
}