🌎 react-globe (v5.0.2)

Animations

react-globe provides a simple way to execute globe animations through a series of steps. Simply pass an array of animation steps to the animations prop and react-globe will sequentially execute the animations.

Animations are executed using the focus mechanism and therefore each animation requires specifying the coordinates, focusAnimationDuration, focusDistanceRadiusScale and focusEasingFunction.

When the globe is animating, it is locked and all interactions are disabled until the animation sequence is completed.

xxxxxxxxxx
 
() => {
  const [animationSequence, setAnimationSequence] = useState()
  let animations = []
  switch (animationSequence) {
    case 'singapore':
      animations = [
        {
          coordinates: [1.3521, 103.8198],
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Linear', 'None'],
        },
      ]
      break
    case 'world':
      animations = [
        {
          coordinates: [1.3521, 103.8198],
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Linear', 'None'],
        },
        {
          coordinates: [39.9042, 116.4074],
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Cubic', 'InOut'],
        },
        {
          coordinates: [37.773972, -122.431297],
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Back', 'InOut'],
        },
        {
          coordinates: [40.73061, -73.935242],
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Circular', 'InOut'],
        },
        {
          coordinates: [51.5074, 0.1278],
          focusAnimationDuration: 3000,
          focusDistanceRadiusScale: 2,
          focusEasingFunction: ['Quadratic', 'InOut'],
        },
        {
          coordinates: [1.3521, 103.8198],
          focusAnimationDuration: 5000,
          focusDistanceRadiusScale: 4,
          focusEasingFunction: ['Linear', 'None'],
        },
      ]
      break
    default:
      animations = []
  }
  return (
    <div>
      <button onClick={() => setAnimationSequence('singapore')}>
        Go to Singapore
      </button>
      <button onClick={() => setAnimationSequence('world')}>
        Travel the world
      </button>
      <ReactGlobe animations={animations} />
    </div>
  )
}