react-spring#animated TypeScript Examples

export function ZapQuakeDisplay(props: Props) {
  const fade = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });
  return (
    <animated.div
      style={fade}
      className="mb-2 flex justify-center items-center space-x-2"
    >
      {props.zapQuake.nbZaps !== 0 && (
        <SpellDisplay
          name="lightning"
          maxLevel={DATA_SPELLS[1].damage.length}
          level={props.zapLevel}
          quantity={props.zapQuake.nbZaps}
          size="sm"
        />
      )}
      {props.zapQuake.nbQuakes !== 0 && (
        <SpellDisplay
          name="quake"
          maxLevel={DATA_SPELLS[0].damage.length}
          level={props.quakeLevel}
          quantity={props.zapQuake.nbQuakes}
          size="sm"
        />
      )}
      <span className="spell-capacity-usage font-semibold text-gray-800 dark:text-gray-100">
        ({props.zapQuake.nbQuakes + props.zapQuake.nbZaps}/{props.spellCapacity}
        )
      </span>
    </animated.div>
  );
}

Component = function DragPanelComponent(props: Props) {
  const bind = useDrag(e => {
    const dy = e.delta[1];
    props.onResize && props.onResize(dy);
  });

  return (
    <animated.div {...bind()} className={css.dragPanel}>
      <div className={css.left}>
        <FlowsTableColumnsSelector
          visibleColumns={props.flowsTableVisibleColumns}
          onToggleColumn={props.onToggleFlowsTableColumn}
        />
      </div>
      <div className={css.center} />
      <div className={css.right} />
    </animated.div>
  );
}

ChipWrapper = styled(animated.div)`
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: ${(p) => p.color};
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 1;
`

SectionRightItem: React.FC<Props> = (props) => {
  const { icon, title, description, onClick, active } = props;
  const descriptionRef = useRef(null);

  const animatedDescriptionProps = useSpring({
    to: {
      height: active ? descriptionRef.current?.clientHeight || 'auto' : 0,
      marginTop: active ? 5 : 0,
    },
    config: { tension: 2000, friction: 100, precision: 1 },
  });

  return (
    <div
      className={clsx(styles.Container, {
        [styles.Container_Active]: active,
      })}
      onClick={onClick}>
      <h3 className={styles.Header}>
        {icon && <Icons type={icon} className={styles.Icon} />}
        {title}
      </h3>
      <animated.div
        className={styles.Description}
        style={animatedDescriptionProps}>
        <p ref={descriptionRef}>{description}</p>
      </animated.div>
    </div>
  );
}

Routes: React.FC = () => {
  const location = useLocation();
  const transitions = useTransition(location, (location) => location.pathname, {
    config: {
      duration: 250,
    },
    from: {
      opacity: 0.25,
    },
    enter: {
      opacity: 1,
    },
    leave: {
      opacity: 0.25,
    },
  });

  return (
    <React.Suspense fallback={<SplashScreen />}>
      {transitions.map(({ item: location, props, key }) => (
        <animated.div
          key={key}
          style={{
            ...props,
            width: "100%",
            position: "absolute",
          }}
        >
          <Switch location={location}>
            <Route path="/pokemons/:id" component={PokemonDetailsPage} />
            <Route exact path="/" component={PokemonsPage} />
          </Switch>
        </animated.div>
      ))}
    </React.Suspense>
  );
}

export function Orbit(props: Props) {
	const { orbitRadius, planetWidth, planetHeight, open, tension, friction, mass } = props;
	const classes = useStyles(props);
	const position = useSpring({
		reverse: !open,
		from: getInitalOrbitPosition(planetWidth, planetHeight),
		to: getFinalOrbitPosition(planetWidth, planetHeight, orbitRadius),
		config: { mass, tension, friction },
	});

	return <animated.div className={classes.orbit} style={position} />;
}

Trail = ({ open, children, className, ...props }: Props) => {
  const items = React.Children.toArray(children);
  const trail = useTrail(items.length, {
    config: { mass: 5, tension: 2000, friction: 200 },
    opacity: open ? 1 : 0,
    x: open ? 0 : 20,
    height: open ? 110 : 0,
    from: { opacity: 0, x: 20, height: 0 },
  });
  return (
    <div {...props}>
      <div>
        {trail.map(({ x, height, ...rest }, index) => (
          <animated.div
            key={index}
            style={{
              ...rest,
              // @ts-ignore
              transform: x.interpolate((x) => `translate3d(0,${x}px,0)`),
            }}
          >
            <animated.div className={className}>{items[index]}</animated.div>
          </animated.div>
        ))}
      </div>
    </div>
  );
}

SideDrawerWrap = styled(animated.nav)`
  background-color: #f4f5f9;
  height: 100%;
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  max-width: 400px;
  z-index: 30;
`

AnimatedContainer = styled(animated.div, {
  shouldForwardProp: (prop) => prop !== 'isAnimatingSwitchMember',
})<{
  isAnimatingSwitchMember: boolean
}>`
  position: absolute;
  height: 100%;
  width: 280px;
  will-change: transform, opacity;
  overflow-y: ${({ isAnimatingSwitchMember }) => (isAnimatingSwitchMember ? 'hidden' : 'auto')};
  overflow-x: hidden;
`

function Heart(props: HeartProps) {
  const { have } = props;
  const { opacity } = useSpring({
    opacity: have ? 1 : 0.4,
    config: { duration: 300 },
  });
  const { scale } = useSpring({
    scale: have ? 1 : 0.8,
    config: { mass: 1, tension: 200, friction: 20, duration: 300 },
    delay: 200,
  });

  return (
    <animated.img
      className={styles.heart}
      style={{ opacity, scale }}
      src="/images/heart.svg"
    />
  );
}

MyComponent = (props: MyComponentPropsType) => {
  const parsedProps = useParseProps(props);

  console.log('look it me', parsedProps.parsedProp1);
  const { myVar } = useSpring({
    from: { myVar: 0 },
    to: { myVar: parsedProps.parsedProp1 },
    loop: true,
    config: { duration: 3000 },
  });
  return (
    <div>
      current val: <animated.div>{myVar}</animated.div>
    </div>
  );
}

function TransitionComponent(props: TransitionProps & { children: React.ReactNode }) {
    const style = useSpring({
        from: { opacity: 0, transform: 'translate3d(20px,0,0)' },
        to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` },
    });

    return (
        <animated.div style={style}>
            <Collapse {...props} />
        </animated.div>
    );
}

AnimatedDialogContent = animated(DialogContent)

Container = styled(animated.div)<ContainerProps>`
  width: 360px;
  position: relative;
  padding: 16px 30px 16px 16px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0.2);
  display: flex;
  & + div {
    margin-top: 8px;
  }
  ${(props) => toastTypeVariations[props.type || 'info']}
  > svg {
    margin: 4px 12px 0 0;
  }
  div {
    flex: 1;
    p {
      margin-top: 4px;
      font-size: 14px;
      opacity: 0.8;
      line-height: 20px;
    }
  }
  button {
    position: absolute;
    right: 16px;
    top: 19px;
    opacity: 0.6;
    border: 0;
    background: transparent;
    color: inherit;
  }
  ${(props) =>
    !props.hasDescription &&
    css`
      align-items: center;
      svg {
        margin-top: 0;
      }
    `}
`

AnimatedDialogOverlay = animated(DialogOverlay)

export function Satellite(props: Props) {
  const {
    children,
    index,
    satelliteCount,
    open,
    planetWidth,
    planetHeight,
    tension,
    friction,
    mass,
    orbitRadius,
    rotation,
    dragable,
    dragRadius,
    orientation,
  } = props;
  const classes = useStyles(props);
  const { ref, height = 0, width = 0 } = useResizeObserver();
  const position = useSpring({
    reverse: !open,
    from: getInitalSatellitePosition(width, height, planetWidth, planetHeight),
    to: getFinalSatellitePosition(
      index,
      satelliteCount,
      width,
      height,
      planetWidth,
      planetHeight,
      orbitRadius,
      rotation,
      orientation
    ),
    config: { mass, tension, friction },
  });

  return (
    <animated.div className={classes.root} style={position}>
      <DragableContainer
        on={dragable}
        dragRadius={dragRadius}
        dragable={dragable}
      >
        <div ref={ref as any}>{children}</div>
      </DragableContainer>
    </animated.div>
  );
}

Container = styled(animated.div)<ContainerProps>`
  width: 360px;
  position: relative;
  padding: 16px 30px 16px 16px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  & + div {
    margin-top: 8px;
  }
  ${props => toastTypeVariations[props.type || 'info']}
  > svg {
    margin: 4px 12px 0 0;
  }
  div {
    flex: 1;
    p {
      margin-top: 4px;
      font-size: 14px;
      opacity: 0.8;
      line-height: 20px;
    }
  }
  button {
    position: absolute;
    right: 16px;
    top: 19px;
    opacity: 0.6;
    border: 0;
    background: transparent;
    color: inherit;
  }
  ${props =>
    !props.has_description &&
    css`
      align-items: center;
      svg {
        margin-top: 0;
      }
    `}
`

AnimatedDialogContent = animated(DialogContent)

Container = styled(animated.div) <ContainerProps>`
  width: 360px;
  position: relative;
  padding: 16px 30px 16px 16px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;

  & + div {
    margin-top: 12px;
  }

  ${(props) => toastTypeVariations[props.type || 'info']}

  > svg {
    margin: 4px 12px 0 0;
  }

  div {
    flex: 1;

    p {
      margin-top: 4px;
      font-size: 14px;
      opacity: 0.8;
      line-height: 20px;
    }
  }

  button {
    position: absolute;
    right: 16px;
    top: 19px;
    opacity: 0.6;
    border: 0;
    background: transparent;
    color: inherit;
  }

  ${(props) =>
    !props.hasDescription &&
    css`
      align-items: center;

      svg {
        margin-top: 0;
      }
    `}
`

AnimatedDialogContent = animated(DialogContent)

ModalContainer: React.FC<ModalProps & Props> = ({
  children,
  isOpen,
  footer,
  transition,
  onBackdropClick,
  transformDistance,
  modalClassName,
  modalZIndex,
}) => {
  const modalTransitions = useModalTransition(transition, isOpen);

  return (
    <>
      {modalTransitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div
              key={key}
              style={props}
              className="rsm-fixed rsm-inset-0 rsm-m-4 sm:rsm-m-8 rsm-flex rsm-justify-center rsm-items-center rsm-z-40"
              onClick={onBackdropClick}
            >
              <div
                className={`rsm-bg-white rsm-rounded-md rsm-overflow-auto rsm-max-h-full rsm-w-full md:rsm-w-10/12 xl:rsm-w-1/2 rsm-opactiy-100 rsm-shadow-lg rsm-z-9999 rsm-border rsm-border-gray-200 rsm-flex rsm-flex-col ${modalClassName ??
                  ''}`}
                style={{
                  minHeight: '70%',
                  transition:
                    transition === ModalTransition.NONE
                      ? ''
                      : 'transform ease-in-out .2s',
                  transform: `translate(${transformDistance}px, ${transformDistance}px)`,
                  transformOrigin: 'center',
                  zIndex: modalZIndex,
                }}
                onClick={e => e.stopPropagation()}
              >
                <div className="rsm-flex-1 rsm-p-8">{children}</div>
                {!footer ? null : (
                  <div className="rsm-bg-gray-200 rsm-p-4">{footer}</div>
                )}
              </div>
            </animated.div>
          )
      )}
    </>
  );
}

Skeleton: React.FC<SkeletonProps> = ({ isLoading = true, theme, children }) => {
  const transitions = useTransition(isLoading, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    delay: 200,
  });

  const renderContentLoader = () => {
    switch (theme) {
      case 'FACEBOOK':
        return <Facebook />;
      case 'INSTAGRAM':
        return <Instagram />;
      case 'CODE':
        return <Code height={50} backgroundColor="#979797" foregroundColor="#aeaeae" />;
      case 'LIST':
        return <List />;
      case 'BULLET_LIST':
        return <BulletList />;
      case 'GAME_LIST_ITEM':
        return <GameListItemSkeleton />;
      case 'GAME_CARD_ITEM':
        return <GameCardItemSkeleton />;
      case 'PROFILE_INFO_CARD':
        return <ProfileInfoCardSkeleton />;
      case 'TEXT':
        return <TextSkeleton />;
      default:
        return null;
    }
  };

  return transitions(({ opacity }, item) => {
    return item ? (
      <animated.div
        style={{
          opacity: opacity.to({ range: [0.0, 1.0], output: [0, 1] }),
        }}
      >
        {renderContentLoader()}
      </animated.div>
    ) : (
      <animated.div
        style={{
          opacity: opacity.to({ range: [1.0, 0.0], output: [1, 0] }),
        }}
      >
        {children}
      </animated.div>
    );
  });
}

AnimatedDialogOverlay = animated(DialogOverlay)

PokemonDetailsHeader = ({
  pokemon,
  species,
  selectedBackgroundColor,
}: Props) => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const { width, height, top, left } = useResize(containerRef);
  const [props, set] = useSpring(() => ({
    xy: [0, 0],
    config: { mass: 10, tension: 550, friction: 140 },
  }));

  const kanjiName = species.names.find(
    (name) => name.language.name === "ja-Hrkt"
  );
  const imagePlaceholder = pokemon.types.map(({ type }) => {
    const [[, image]] = Object.entries(PokemonTypePlaceholders).filter(
      ([key, _]) => key === type.name
    );

    return image;
  });

  return (
    <>
      <div
        className="w-full"
        ref={containerRef}
        onMouseMove={({ clientX, clientY }) =>
          set({
            xy: calc(clientX - left, clientY - top, width + left, height + top),
          })
        }
      >
        <div className="px-4 md:px-8">
          <p className="text-md mt-4 text-white font-medium">
            #{leftPad(pokemon.id, 3)}
          </p>
          <h1 className="text-2xl md:text-3xl lg:text-4xl text-white font-bold pb-6 capitalize">
            {pokemon.name}
          </h1>
        </div>

        <div className="relative text-center mx-auto w-full h-96 mt-8 lg:mt-24">
          <h1 className="absolute -mt-2 text-6xl z-0 w-full text-white opacity-50 font-extrabold overflow-hidden">
            {kanjiName && kanjiName.name}
          </h1>

          <animated.div
            style={{
              ...MaskStyling,
              backgroundColor: selectedBackgroundColor.light,
              //@ts-ignore
              transform: props.xy.interpolate(trans1),
            }}
            className="rounded-full absolute inset-x-auto mx-auto z-0 inline-block left-0 right-0"
          />

          <animated.div
            style={{
              ...PokemonImageStyling,
              position: "absolute",
              //@ts-ignore
              transform: props.xy.interpolate(trans2),
            }}
          >
            <ProgressiveImage
              preview={imagePlaceholder[0]}
              src={pokemon.sprites.frontDefault}
              render={(src, style) => (
                <img src={src} alt={pokemon.name} style={style} />
              )}
            />
          </animated.div>
        </div>
      </div>
      <div className="-mt-12" />
    </>
  );
}

AnimatedFader = animated(Fader)

AnimatedDialogOverlay = animated(DialogOverlay)

export default function GameOver(props: Props) {
  const { highscore, resetGame, score } = props;

  const animProps = useSpring({
    opacity: 1,
    from: { opacity: 0 },
    config: { duration: 500 },
  });

  const [shareText, setShareText] = React.useState(defaultShareText);

  const share = React.useCallback(async () => {
    await navigator?.clipboard?.writeText(
      `?️ wikitrivia.tomjwatson.com\n\n${getMedal(
        score
      )}Streak: ${score}\n${getMedal(highscore)}Best Streak: ${highscore}`
    );
    setShareText("Copied");
    setTimeout(() => {
      setShareText(defaultShareText);
    }, 2000);
  }, [highscore, score]);

  return (
    <animated.div style={animProps} className={styles.gameOver}>
      <div className={styles.scoresWrapper}>
        <div className={styles.score}>
          <Score score={score} title="Streak" />
        </div>
        <div className={styles.score}>
          <Score score={highscore} title="Best streak" />
        </div>
      </div>
      <div className={styles.buttons}>
        <Button onClick={resetGame} text="Play again" />
        <Button onClick={share} text={shareText} minimal />
      </div>
    </animated.div>
  );
}

AnimatedDialogOverlay = animated(DialogOverlay)

Circle = animated((props: Value) => {
  return (
    <svg width="100%" height="100%" viewBox="0 0 598 598">
      <defs>
        <pattern
          id="pattern"
          patternUnits="userSpaceOnUse"
          width="3"
          height="3"
        >
          <image xlinkHref={textBackground} width="3" height="3" />
        </pattern>
        <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" style={{ stopColor: '#cccccc', stopOpacity: 1 }} />
          <stop offset="20%" style={{ stopColor: '#cccccc', stopOpacity: 1 }} />
          <stop
            offset="100%"
            style={{ stopColor: '#555555', stopOpacity: 1 }}
          />
        </linearGradient>
      </defs>
      {props.ratio > 0 && (
        <path
          d={pathGenerator(props) ?? ''}
          strokeLinecap="round"
          fill="url(#gradient)"
          transform="translate(299, 299)"
        />
      )}
      <text opacity="0.4" fontSize="10" fill="#373737">
        <tspan x="114" y="505">
          BANK
        </tspan>
      </text>
      <text opacity="0.4" fontSize="10" fill="#373737">
        <tspan x="440" y="505">
          ANCHOR
        </tspan>
      </text>
      <text>
        <tspan
          x="299"
          y="340"
          textAnchor="middle"
          fontSize="120"
          fontWeight="900"
          letterSpacing="-4"
          fill="url(#pattern)"
        >
          ${numeral(amountScale(props.ratio)).format('0,0')}
        </tspan>
      </text>
    </svg>
  );
})