// anime({
//   targets: '#main_title',
//   top: ['240px', '100px'],
//   opacity: ['0', '1'],
//   easing: 'easeInOutQuad'
// });
//
// anime({
//   targets: '#hand',
//   top: ['0px', '100px'],
//   easing: 'easeInOut'
// });
//
// anime({
//   targets: '#cover h2',
//   opacity: ['0.5', '1'],
//   easing: 'easeInOut'
// });
// anime({
//   targets: '#phone-watches-1',
//   left: ['-5vw', '0vw'],
//   top: ['50vh', '45vh'],
//   easing: 'easeInOut'
// });

// Add timeline
let tl1 = anime.timeline({autoplay: false});

let s1a2 = {
  targets: '#hand',
  top: ['0px', '100px'],
  easing: 'easeInOut'
};

// Add children
tl1.add(s1a2);

let controller = new ScrollMagic.Controller();

//Add first scrollmagic scene
let scene1 = new ScrollMagic.Scene({
  triggerElement: "#cover",
  triggerHook: 0.5,
  reverse: false
})

  // Add debug indicators
  .addIndicators({
    colorTrigger: "black",
    colorStart: "blue",
    colorEnd: "red",
    indent: 10
  })

  // Trigger animation timeline
  .on("progress", function (event) {
    tl1.seek(tl2.duration * event.progress);
  })
  .addTo(controller);




//Add second scrollmagic scene
let scene2 = new ScrollMagic.Scene({
  triggerElement: "#two",
  duration: 4500,
  triggerHook: 0,
})

  // Add debug indicators
  .addIndicators({
    colorTrigger: "black",
    colorStart: "blue",
    colorEnd: "red",
    indent: 10
  })

  // Trigger animation timeline
  //Use scroll position to play animation
  .on("progress", function (event) {
    console.log('tl2.duration', tl2.duration)
    console.log('event.progress', event.progress)
    tl2.seek(tl2.duration * event.progress);
  })

  .setPin('#two')
  .addTo(controller);


let twoHeight = document.getElementById("two").clientHeight;
console.log('section two Height: ' + twoHeight);