How to use @react-spring/core - 7 common examples

import { Anchor, invalidate, applyProps, addEffect } from 'react-zdog'
import { Globals, FrameLoop, update } from '@react-spring/core'
import { createStringInterpolator } from 'shared/stringInterpolation'
import colorNames from 'shared/colors'

// Add the update function as a global effect to react-zdog's update loop
if (addEffect) addEffect(update)

Globals.assign({
  defaultElement: Anchor,
  frameLoop: addEffect && new FrameLoop({ requestFrame: invalidate }),
  applyAnimatedValues: applyProps,
  createStringInterpolator,
  colorNames,
})

import { invalidate, applyProps, addEffect } from 'react-three-fiber'
import { Globals, FrameLoop, update } from '@react-spring/core'
import { createStringInterpolator } from 'shared/stringInterpolation'
import colorNames from 'shared/colors'

// Add the update function as a global effect to react-three-fibers update loop
if (addEffect) addEffect(update)

Globals.assign({
  defaultElement: 'group',
  frameLoop: addEffect && new FrameLoop({ requestFrame: invalidate }),
  applyAnimatedValues: applyProps,
  createStringInterpolator,
  colorNames,
})

import { Anchor, invalidate, applyProps, addEffect } from 'react-zdog'
import { Globals, FrameLoop, update } from '@react-spring/core'
import { createStringInterpolator } from 'shared/stringInterpolation'
import colorNames from 'shared/colors'

// Add the update function as a global effect to react-zdog's update loop
if (addEffect) addEffect(update)

Globals.assign({
  defaultElement: Anchor,
  frameLoop: addEffect && new FrameLoop({ requestFrame: invalidate }),
  applyAnimatedValues: applyProps,
  createStringInterpolator,
  colorNames,
})

import { invalidate, applyProps, addEffect } from 'react-three-fiber'
import { Globals, FrameLoop, update } from '@react-spring/core'
import { createStringInterpolator } from 'shared/stringInterpolation'
import colorNames from 'shared/colors'

// Add the update function as a global effect to react-three-fibers update loop
if (addEffect) addEffect(update)

Globals.assign({
  defaultElement: 'group',
  frameLoop: addEffect && new FrameLoop({ requestFrame: invalidate }),
  applyAnimatedValues: applyProps,
  createStringInterpolator,
  colorNames,
})

() => ({
        config,
        busy: false,
        space: 0,
        current: 0,
        offset: 0,
        controller: new Controller({ scroll: 0 }),
        layers: new Set(),
        update: () => update(),
        scrollTo: offset => scrollTo(offset),
        stop: () => state.controller.stop(),
      }),
      []

  const [{ scrollSpring }, setScrollSpring] = useSpring(() => ({ scrollSpring: 0, config: config.molasses }));

({
    pages,
    config = configs.slow,
    enabled = true,
    horizontal = false,
    innerStyle,
    ...rest
  }: ParallaxProps) => {
    const [ready, setReady] = useState(false)

    let state: IParallax
    state = useMemoOne(
      () => ({
        config,
        busy: false,
        space: 0,
        current: 0,
        offset: 0,
        controller: new Controller({ scroll: 0 }),