• Learning about animations in three.js
• like in mapbox.gl. it’s all done with window.requestAnimationFrame(). I like the way Bruno puts it. requestAnimationFrame is not for animations, it’s for running a function on each frame.
• Frames are vary from computer to computer, more power computers can run at higher FPS. Therefore it;s important to normalise animations by using a some sort of timing utility.
• three.js has new THREE.Clock() build in with the .getElapsedTime() method returns back the elapsed time in seconds. With this normalised value we can guranteed with can animate object consistently regardless of the computer it is on.
• Lots of maths tricks will be required to get cool animations tricks to happen. Remember that when rotating object Math.PI will rotate an object 180 degress. Math.sin and Math.cos can create a wavy animation returning back to 0
• GSAP makes animating three.js objects a breeze!

// Move object back and forth
GSAP.to(mesh.position, {
  x: 2,
  duration: 1,
  delay: 1,
});
GSAP.to(mesh.position, {
  x: 0,
  duration: 1,
  delay: 2,
});