digital-theory/js/main.js

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, '-=10');

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("enter", function (event) {
    tl1.play();
  })

  .addTo(controller);