How to use @react-spring/animated - 10 common examples

ElementType,
  ComponentPropsWithRef,
  FluidValue,
} from 'shared'
import { KonvaExports, KonvaElements, elements } from './elements'

type CreateAnimated = (
  wrappedComponent: T
) => AnimatedComponent

type KonvaComponents = {
  [Tag in KonvaElements]: AnimatedComponent
}

// Extend animated with all the available Konva elements
export const animated: CreateAnimated & KonvaComponents = extendAnimated(
  withAnimated,
  elements
)

export { animated as a }

/** The type of an `animated()` component */
export type AnimatedComponent<
  T extends ElementType
> = ForwardRefExoticComponent>>

/** The props of an `animated()` component */
export type AnimatedProps = {
  [P in keyof Props]: (P extends 'ref' | 'key'
    ? Props[P]
    : AnimatedProp)

'Rect',
  'RoundedRect',
  'Ellipse',
  'Polygon',
  'Hemisphere',
  'Cylinder',
  'Cone',
  'Box',
]

type CreateAnimated = (
  wrappedComponent: T
) => AnimatedComponent

// Extend animated with all the available Zdog elements
export const animated: CreateAnimated & ZdogComponents = extendAnimated(
  withAnimated,
  elements
)

export { animated as a }

/** The type of an `animated()` component */
export type AnimatedComponent<
  T extends ElementType
> = ForwardRefExoticComponent>>

/** The props of an `animated()` component */
export type AnimatedProps = {
  [P in keyof Props]: (P extends 'ref' | 'key'
    ? Props[P]
    : AnimatedProp)

advance(dt: number, spring: SpringValue) {
    let idle = true
    let changed = false

    const anim = spring.animation!
    const parent = isFluidValue(anim.to) && anim.to
    const payload = isAnimationValue(parent) && parent.node!.getPayload()

    anim.values.forEach((node, i) => {
      if (node.done) return

      let to: number = payload
        ? payload[i].lastPosition
        : parent
        ? toArray(parent.get())[i]
        : anim.toValues![i]

      // Parent springs must finish before their children can.
      const canFinish = !payload || payload[i].done

      const { config } = anim

      // Loose springs never move.

it('accepts Animated values in custom style prop', () => {
    const Name = forwardRef<
      HTMLHeadingElement,
      { style: { color: string; opacity?: number }; children: React.ReactNode }
    >((props, ref) => (
      <h2 style="{props.style}">
        {props.children}
      </h2>
    ));
    const AnimatedName = animated(Name);
    const opacity = new AnimatedValue(0.5);
    const { queryByText } = render(
      
        Text
      
    );
    const div: any = queryByText('Text')!;
    expect(div).toBeTruthy();
    expect(div.style.opacity).toBe('0.5');
    opacity.setValue(1);
    expect(div.style.opacity).toBe('1');
  });

it('accepts Animated values in style prop', () => {
    const AnimatedDiv = animated('div');
    const opacity = new AnimatedValue(0);
    const { queryByText } = render(
      Text
    );
    const div: any = queryByText('Text')!;
    expect(div).toBeTruthy();
    expect(div.style.opacity).toBe('0');
    opacity.setValue(1);
    expect(div.style.opacity).toBe('1');
  });

it('wraps a component', () => {
    const Name = forwardRef<
      HTMLHeadingElement,
      { name: string; other: string; children: React.ReactNode }
    >((props, ref) => (
      <h2 title="{props.name}">
        {props.children}
      </h2>
    ));
    const AnimatedName = animated(Name);
    const child = new AnimatedValue('Animated Text');
    const name = new AnimatedValue('name');
    const { queryByTitle } = render(
      } other="test"&gt;
        {child}
      
    );
    const el: any = queryByTitle('name')!;
    expect(el).toBeTruthy();
    expect(el.textContent).toBe('Animated Text');
  });

it('accepts scrollTop and scrollLeft properties', () => {
    const AnimatedDiv = animated('div');
    const scrollTop = new AnimatedValue(0);
    const { queryByTestId } = render(
      }
        scrollLeft={new AnimatedValue(0) as SpringValue}
        style={{ height: 100 }}
        data-testid="wrapper">
        <div style="{{">
      
    );
    const wrapper: any = queryByTestId('wrapper')!;
    expect(wrapper.scrollTop).toBe(0);
    expect(wrapper.scrollLeft).toBe(0);
    scrollTop.setValue(20);
    expect(wrapper.scrollTop).toBe(20);
  });
</div>

it('accepts scrollTop and scrollLeft properties', () => {
    const AnimatedDiv = animated('div');
    const scrollTop = new AnimatedValue(0);
    const { queryByTestId } = render(
      }
        scrollLeft={new AnimatedValue(0) as SpringValue}
        style={{ height: 100 }}
        data-testid="wrapper">
        <div style="{{">
      
    );
    const wrapper: any = queryByTestId('wrapper')!;
    expect(wrapper.scrollTop).toBe(0);
    expect(wrapper.scrollLeft).toBe(0);
    scrollTop.setValue(20);
    expect(wrapper.scrollTop).toBe(20);
  });
</div>

it('wraps a component', () => {
    const Name = forwardRef<
      HTMLHeadingElement,
      { name: string; other: string; children: React.ReactNode }
    >((props, ref) => (
      <h2 title="{props.name}">
        {props.children}
      </h2>
    ));
    const AnimatedName = animated(Name);
    const child = new AnimatedValue('Animated Text');
    const name = new AnimatedValue('name');
    const { queryByTitle } = render(
      } other="test"&gt;
        {child}
      
    );
    const el: any = queryByTitle('name')!;
    expect(el).toBeTruthy();
    expect(el.textContent).toBe('Animated Text');
  });

constructor(readonly inputs: Inputs, readonly transforms: Transforms) {
    super()
    this.node = new AnimatedValue(this._compute())
  }