react-spring#animated JavaScript Examples

export function ValuePill({ title, value = 0 }) {
  const { v } = useSpring({
    from: {
      v: 0,
    },
    to: {
      v: value,
    },
    delay: 0,
    config: config.slow,
  });

  return (
    <div className="flex items-center justify-between h-6 dark:text-gray-200 dark:bg-gray-800 rounded-lg shadow-xs">
      <span className="mx-2 text-xxs font-medium leading-none xl:text-sm">
        {title}
      </span>
      <div className="flex items-center h-full text-xs font-medium bg-primary-500 rounded-lg xl:text-base">
        <animated.span className="inline-flex items-center justify-center align-bottom px-3 py-1 text-white leading-5 rounded-md shadow-xs">
          {v.interpolate((x) => Math.round(x))}
        </animated.span>
      </div>
    </div>
  );
}

AnimatedPath = ({ data, x, sigma2, xScale, yScale, linex, mu, sample, animating, className }) => {
  const [val, set] = useSpring(() =>  ({value: sigma2, immediate: false, config: {duration: 500}} ));

  set({value: sigma2, immediate: !animating})

  const interp = (sigma2) => {
    const interpLine = data.map(d => ([d[0], logLikSum(sample, d[0], sigma2)]));
    return linex(interpLine);
  }

  return (
    <animated.path d={val.value.interpolate(sigma2 => interp(sigma2))} className={className} />
  );
}

Alert = ({ children, onClick, style }) => (
  <animated.div style={style} className="alert">
    <h3 style={{ color: 'white' }} className="heading-3 font-medium">
      {children}
    </h3>
    {onClick && (
      <TextButton onClick={onClick} blue bold>
        Retry
      </TextButton>
    )}
  </animated.div>
)

function AnimatedRightIcon({onClick, disabled}) {

  const props = useSpring({
    to: handleAnim,
    from: {opacity: 1, color: '#8892b0', height: '100px', width: '100px'},
    config: {duration: 1000},
    reset: true,
  });

  const [props2, set] = useSpring(() => ({ xys: [0, 0, 1], config: { mass: 5, tension: 350, friction: 40 } }))
// ...

  const Icon = animated(ChevronRightIcon);
  return (
    disabled ? <ChevronRightIcon style={{height: '100px', width: '100px', display: "none"}}/> :
    <Icon style={{...props,...props2, transform: props2.xys.interpolate(trans), cursor: "pointer"}} onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
          onMouseLeave={() => set({ xys: [0, 0, 1] })} onClick={onClick}
    />
  )
}

function DistrictMap({ filterDistrict, filterFacilityTypes, date }) {
  const { data } = useSWR(
    ["Capacity", date, filterDistrict.id],
    (url, date, district) =>
      careSummary(
        "facility",
        dateString(getNDateBefore(date, 1)),
        dateString(getNDateAfter(date, 1)),
        district
      )
  );
  const todayFiltered = useMemo(() => {
    return processFacilities(data.results, filterFacilityTypes).filter(
      (f) => f.date === dateString(date)
    );
  }, []);

  const transitions = useTransition(null, {
    enter: { opacity: 1 },
    from: { opacity: 0 },
    leave: { opacity: 0 },
  });

  return transitions.map(({ item, key, props }) => (
    <animated.div key={key} style={props}>
      <div id="capacity-map">
        <SectionTitle>Map</SectionTitle>
      </div>
      <Suspense fallback={<ThemedSuspense />}>
        <GMap
          className="mb-8"
          facilities={todayFiltered}
          district={filterDistrict}
        />
      </Suspense>
    </animated.div>
  ));
}

Icon = ({ onClick, className, icon, style }) => {
  const iconClassNames = classNames({
    icon: true,
    [className]: className,
  });

  return (
    <animated.div style={style} onClick={onClick} className={iconClassNames}>
      <ion-icon size="small" name={icon}></ion-icon>
    </animated.div>
  );
}

Filled = styled(animated.div)`
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: ${PRIMARY};
  border-radius: 2px;
`

UserAvatar = styled(animated.img)`
  width: 45px;
  height: 45px;
  margin-left: 10px;
  margin-bottom: 5px;
  flex-shrink: 0;
  border-radius: 50px;
  user-select: none;
`

function Level({data}) {
  const trail = useMemo(() => {
    const styles = [];

    LEVEL_STATISTICS.map((statistic, index) => {
      styles.push({
        animationDelay: `${750 + index * 250}ms`,
        width: `calc(${100 / LEVEL_STATISTICS.length}%)`,
      });
      return null;
    });
    return styles;
  }, []);

  return (
    <div className="Level">
      {LEVEL_STATISTICS.map((statistic, index) => (
        <animated.div
          key={index}
          className={classnames('level-item', `is-${statistic}`, 'fadeInUp')}
          style={trail[index]}
        >
          <LevelItem
            {...{statistic}}
            total={getStatistic(data, 'total', statistic)}
            delta={getStatistic(data, 'delta', statistic)}
          />
        </animated.div>
      ))}
    </div>
  );
}

CheckIn = styled(animated.div)`
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 320px;
  margin-bottom: 14px;
  padding: 12.5px 15px;
  background: #fff;
  box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
`

Container = styled(animated.div)`
  .card {
    border: none;
    box-shadow: none;
  }
  .card-content {
    padding: 1rem 0;
  }
  .card-image {
    min-height: 241px;
  }
  .image.is-4by5 {
    padding-top: 0;
  }
`

function Level({data}) {
  const {t} = useTranslation();

  const spring = useSpring({
    total: getStatistic(data, 'total', 'vaccinated'),
    // delta: getStatistic(data, 'delta', 'vaccinated'),
    config: SPRING_CONFIG_NUMBERS,
  });

  const statisticConfig = STATISTIC_CONFIGS.vaccinated;

  return (
    <div
      className="level-vaccinated fadeInUp"
      style={{animationDelay: `${750 + 4 * 250}ms`}}
    >
      <ShieldCheckIcon />
      <animated.div>
        {spring.total.to((total) => formatNumber(total, 'long'))}
      </animated.div>
      {/* <animated.div>
        {spring.delta.to(
          (delta) =>
            `(+ ${formatNumber(delta, 'long')})`
        )}
      </animated.div> */}
      <div>{t(statisticConfig.displayName)}</div>
    </div>
  );
}

Back = styled(animated.div)`
  display: flex;
  flex-direction: column;
  background-image: var(--gradientSecondary);
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 1rem;
  color: black;
  overflow-y: scroll;
  li {
    text-align: left;
  }
  & ::-webkit-scrollbar {
    width: 10px;
  }
  & ::-webkit-scrollbar-track {
    background: #111;
  }
  & ::-webkit-scrollbar-thumb {
    background: white;
  }
`

export default function ThemeButton() {
  const [theme, setTheme] = useTheme();

  const transitions = useTransition(theme, {
    initial: { opacity: 1 },
    from: {
      opacity: 0,
      transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
    },
    enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
    leave: {
      opacity: 0,
      transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
    },
  });

  function handleClick() {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }

  return (
    <div className={styles.button} onClick={handleClick}>
      {transitions((styles, item) => (
        <animated.div key={item} style={styles}>
          <Icon icon={item === 'light' ? <Sun /> : <Moon />} />
        </animated.div>
      ))}
    </div>
  );
}

Card = props => {
  const classes = useStyles();
  const { i, x, y, rot, scale, trans, bind, data, mode } = props;
  // TODO ADD STYLING
  return (
    <animated.div
      className={classes.animatedMain}
      key={i}
      style={{
        transform: to([x, y], (x, y) => `translate3d(${x}px,${y}px,0)`),
      }}
    >
      <animated.div
        className={classes.animatedSub}
        {...bind(i)}
        style={{
          transform: to([rot, scale], trans),
        }}
      >
        {mode === 'facts' && <Facts data={data} />}
        {mode === 'quiz' && <Quiz data={data} />}
      </animated.div>
    </animated.div>
  );
}

MetricCard = ({
  value = 0,
  change = 0,
  label,
  reverseColors = false,
  format = formatNumber,
  hideComparison = false,
}) => {
  const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
  const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });

  return (
    <div className={styles.card}>
      <animated.div className={styles.value}>{props.x.interpolate(x => format(x))}</animated.div>
      <div className={styles.label}>
        {label}
        {~~change !== 0 && !hideComparison && (
          <animated.span
            className={`${styles.change} ${
              change >= 0
                ? !reverseColors
                  ? styles.positive
                  : styles.negative
                : !reverseColors
                ? styles.negative
                : styles.positive
            }`}
          >
            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
          </animated.span>
        )}
      </div>
    </div>
  );
}

Gallery = ({ children, step }) => {
  const [scrollY, setScrollY] = useState(0);
  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', springDebounce(handleScroll));
    return () =>
      window.removeEventListener('scroll', springDebounce(handleScroll));
  }, [springDebounce]);

  const [{ springscrollY }, springsetScrollY] = useSpring(() => ({
    springscrollY: 0,
  }));
  const STEP = step;
  springsetScrollY({ springscrollY: scrollY });
  const interpHeader = springscrollY.interpolate(
    o => `translateX(-${o / STEP}px)`
  );

  return (
    <animated.div className={styles.items} style={{ transform: interpHeader }}>
      {children}
    </animated.div>
  );
}

ErrorTag = ({ msg }) => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return (
    <animated.div className={styles.error} style={props}>
      <div className={styles.msg}>{msg}</div>
    </animated.div>
  );
}

SideDrawerWrap = styled(animated.nav)`
  background-color: var(--bodyBkgd);
  height: 100%;
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  z-index: 30;
  overflow: hidden;

  @media screen and (max-width: 768px) {
    width: 100%;
  }
`

AnimatedPath = ({ data, x, sigma2, xScale, yScale, linex, mu, sample, animating }) => {
  const [val, set] = useSpring(() =>  ({value: mu, immediate: false, config: {duration: 500}} ));

  set({value: mu, immediate: !animating})

  const interp = (mu) => {
    const interpLine = data.map(d => ([d[0], logLikSum(sample, mu, d[0])]));
    return linex(interpLine);
  }

  return (
    <animated.path d={val.value.interpolate(mu => interp(mu))} className="LogLikSigma" />
  );
}

Front = styled(animated.div)`
  display: flex;
  flex-direction: column;
  background-image: var(--gradient);
  cursor: pointer;
  color: white;
  padding: 1rem;
  position: absolute;
  width: 100%;
  height: 100%;
`

function Rectangle(props) {
  return (
    <animated.path
      d="M22.7075 10.7517L22.7075 13.16L13.1599 13.16H10.7517L1.20411 13.16L1.20411 10.7517H10.7517H13.1599H22.7075Z"
      fill="white"
      {...props}
    />
  );
}

export default function InfiniteLoader({ loadAnimation }) {
  let infiniteLoader = useSpring({
    from: { marginLeft: "0px", opacity: 0 },
    to: async (next) => {
      let i = 100;
      while (--i) {
        await next({
          marginLeft: "10px",
          opacity: 0.5,
        });

        await next({
          marginLeft: "20px",
          opacity: 0.8,
        });

        await next({
          marginLeft: "30px",
          opacity: 1,
        });

        await next({
          marginLeft: "0px",
          opacity: 1,
        });
      }
    },
    config: {
      tension: "500",
    },
  });
  return (
    <div className="flex gap-4 mx-auto text-center">
      {loadAnimation ? (
        <>
          <animated.div
            className="bg-pink-200 w-8 h-8 rounded-full p-2"
            style={infiniteLoader}
          ></animated.div>
          <animated.div
            className="bg-green-200 w-8 h-8 rounded-full p-2"
            style={infiniteLoader}
          ></animated.div>
          <animated.div
            className="bg-blue-200 w-8 h-8 rounded-full p-2"
            style={infiniteLoader}
          ></animated.div>
        </>
      ) : null}
    </div>
  );
}

HomeBackground = () => {
  const [props] = useSprings(spotsArray.length, () => ({
    ...to(),
    from: from(),
    config: {
      duration: "70000",
      friction: "300",
    },
  }))

  return (
    <div className="home-background">
      <div className="triangle-wrapper">
        <svg
          width="1024px"
          height="380px"
          viewBox="0 0 1024 380"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          className="home-background-triangle"
        >
          <defs>
            <linearGradient
              x1="50%"
              y1="56.2263569%"
              x2="50%"
              y2="100%"
              id="linearGradient-1"
            >
              <stop stopColor="#F26071" offset="0%"></stop>
              <stop stopColor="#DF5A63" stopOpacity="0.4" offset="100%"></stop>
            </linearGradient>
          </defs>
          <g
            id="Home-Page"
            stroke="none"
            strokeWidth="1"
            fill="none"
            fillRule="evenodd"
            fillOpacity="0.8"
          >
            <g id="Ladybug-Podcast-Home-Page" fill="url(#linearGradient-1)">
              <g id="player">
                <polygon
                  id="Rectangle"
                  points="410 0 1024 380 -5.68434189e-13 380"
                ></polygon>
              </g>
            </g>
          </g>
        </svg>
        {props.map(({ x, y }, i) => {
          let { width, height, backgroundColor, borderRadius } = spotsArray[i]
          return (
            <animated.div
              key={i}
              className="spot"
              style={{
                transform: interpolate(
                  [x, y],
                  (x, y) => `translate3d(${x}px,${y}px,0)`
                ),
                backgroundColor: backgroundColor,
                width: width,
                height: height,
                borderRadius: borderRadius,
              }}
            />
          )
        })}
      </div>
    </div>
  )
}

AnimatedSlider = animated(StyledSlider)

Card = styled(animated.div)`
  width: 100%;
  background: #fff;
  margin: 10px 0;
  border-radius: 2px;
  border: 1px solid #e3e3e3;
`

function Router() {
  const location = useLocation();
  const classes = useStyle();

  const transitions = useTransition(location, location => location.pathname, {
    from: {opacity: 0.9, transform: 'translate3d(50%,0,0)'},
    enter: {opacity: 1, transform: 'translate3d(0%,0,0)'},
    leave: {opacity: 0, transform: 'translate3d(50%,0,0)'},
    config: {duration: 800},
  });
  const transitions2 = useTransition(location, location => location.pathname, {
    from: {opacity: 0.9, transform: 'translate3d(-50%,0,0)'},
    enter: {opacity: 1, transform: 'translate3d(0%,0,0)'},
    leave: {opacity: 0, transform: 'translate3d(50%,0,0)'},
    config: {duration: 800},
  });

  return !location.search ? transitions.map(({item: location, props, key}) => (
    <animated.div key={key} style={{...props}} className={classes.root}>
      <Switch>
        <Route exact path="/" render={(props) => <HomePage {...props} />}/>
        <Route exact path="/about" render={(props) => <About {...props}/>}/>
        <Route exact path="/experience" render={(props) => <Experience {...props}/>}/>
        <Route exact path="/work" render={(props) => <Work {...props}/>}/>
        <Route exact path="/journey" render={(props) => <Journey {...props}/>}/>
        {/*<Route exact path="/contact" render={(props) => <Contact {...props}/>}/>*/}
      </Switch>
    </animated.div>
  )) : transitions2.map(({item: location, props, key}) => (
    <animated.div key={key} style={{...props}} className={classes.root}>
      <Switch>
        <Route exact path="/" render={(props) => <HomePage {...props} />}/>
        <Route exact path="/about" render={(props) => <About {...props}/>}/>
        <Route exact path="/experience" render={(props) => <Experience {...props}/>}/>
        <Route exact path="/work" render={(props) => <Work {...props}/>}/>
        <Route exact path="/journey" render={(props) => <Journey {...props}/>}/>
        {/*<Route exact path="/contact" render={(props) => <Contact {...props}/>}/>*/}
        {/*<Route path="/" render={(props) => <Contact {...props}/>}/>*/}
      </Switch>
    </animated.div>
  ))
}

AnimatedDialogOverlay = animated(DialogOverlay)

AnimatedOverlay = animated(StyledOverlay)