react-spring#animated JavaScript Examples

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>
  );
}

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>
  );
}

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}
    />
  );
}

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 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>
  ));
}

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>
  );
}

render() {
    const { isVisible } = this.state;
    const { orderData } = this.props;

    return (
      <>
        <Spring
          native
          from={{ opacity: 0 }}
          to={{ opacity: isVisible ? 1 : 0 }}>
          {stylesProps => (
            <animated.div style={stylesProps}>
              <Result>
                <i className="fas fa-check-circle" />
                <h3 className="is-size-5 is-uppercase	has-text-weight-bold">
                  Payment complete
                </h3>
                <p className="info">
                  Order code is <OrderId>#{orderData.orderId}</OrderId>
                  <br />
                  Please check your email
                  <br />
                  for delivery updates.
                </p>
              </Result>
              <BuyBtn
                to="/"
                className="button is-dark is-large is-radiusless is-uppercase">
                Continue Shopping
              </BuyBtn>
            </animated.div>
          )}
        </Spring>
      </>
    );
  }

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;
`

VisibleBox = styled(animated.div)`
  position: relative;
  border: ${BORDER_WIDTH}px solid #555;
  border-radius: 4px;
  margin-right: 8px;

  ${RealCheckbox}:hover + ${VisibleContents} & {
    border-color: #111;
  }

  ${RealCheckbox}:focus.focus-visible + ${VisibleContents} & {
    outline: 2px auto ${PRIMARY};
    outline-offset: 2px;
  }
`

// function AnimateText({text, favourite}) {
//
//   const slides = text.map((item,i) => ({text: item, id: i}))
//   const [index, set] = useState(0);
//   const transitions = useTransition(slides[index], item => item.id, {
//     from: { opacity: 0 },
//     enter: { opacity: 1 },
//     leave: { opacity: 0 },
//     config: config.molasses,
//   });
//   useEffect(() => void setInterval(() => set(state => (state + 1) % slides.length),500), [])
//   return transitions.map(({ item, props, key }) => (
//     <animated.div
//       key={key}
//       style={{ ...props}}
//     >
//
//     </animated.div>
//   ))
// }


function AnimateText({text}) {
  let [state, setState] = useState(0);

  const transition = useTransition(text[state], null, {
    from: {opacity: 0},
    enter: {opacity: 1},
    leave: {opacity: 0},
  });

  useEffect(() => void setInterval(() => setState(state => (state + 1) % text.length), 1500), [])

  return transition.map(({item, key, state, props, phase}) => {
    return (phase === "enter") &&
      <animated.span style={{...props, textAlign: "center"}} key={key}>{item}</animated.span>
  });
}

AnimatedCircle = ({ x, funcX, y, xScale, yScale, sample, count, animating }) => {
  const [spring, set] = useSpring(() => ({ xy: [x, y], immediate: false, config: {duration: 500}}) );

  set({xy: [x, y], immediate: !animating})

  return (
    <animated.circle
      cx={spring.xy.interpolate((x,y) => xScale(funcX(x,y)))}
      cy={spring.xy.interpolate((x,y) => yScale(y))}
      r="5"
      className="logLikX"
    />
  );
}

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%;
`

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%;
  }
`

function Modal({ title, children }) {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return ReactDOM.createPortal(
    <animated.div className={styles.modal} style={props}>
      <div className={styles.content}>
        {title && <div className={styles.header}>{title}</div>}
        <div className={styles.body}>{children}</div>
      </div>
    </animated.div>,
    document.getElementById('__modals'),
  );
}

AnimatedDialogOverlay = animated(DialogOverlay)

WeeklyTracker = props => {
  const { children, setToggleValue, setDetailData } = props;
  const classes = useStyles();
  let swiped = false;

  const [{ x }, set] = useSpring(() => ({
    x: 0,
    onRest: () => {
      if (swiped) {
        // After swipe animation finishes, show survey details
        setDetailData([children.props.dayData]);
        setToggleValue('showMeMore');
      }
    },
  }));

  const bind = useDrag(
    ({ down, movement: [mx], swipe: [swipeX] }) => {
      if (swipeX === 1) {
        // User swiped
        set({ x: window.innerWidth });
        swiped = true;
        return;
      }

      // Don't allow user to drag off the left side of the screen
      if (mx < 0) {
        return;
      }

      set({ x: down ? mx : 0, immediate: down });
    },
    { axis: 'x' }
  );

  return (
    <div className={classes.noSelect}>
      <animated.div className={classes.item}>
        <animated.div {...bind()} className={classes.fg} style={{ x }}>
          {children}
        </animated.div>
      </animated.div>
    </div>
  );
}

Hero = ({ animation }) => {
  // eslint-disable-next-line no-unused-vars
  const { quotes, ...infoAssets } = useHomeHeroAssets();
  const { ref, inView } = useInView({
    threshold: 0,
  });
  return (
    <section ref={ref} className={styles.container}>
      <div className={styles.wrapper}>
        <div className={styles.title}>
          <h1 className={styles.titleText}>
            Design-driven development of your web product for years
          </h1>
          <Title className={styles.titleSvg} />
        </div>
        <animated.div
          style={{
            transform: inView ? animation.xy.interpolate(trans1) : 'none',
          }}
          className={`${styles.circleWrapper} ${styles.circleSm1Pos}`}
        >
          <div className={`${styles.circle} ${styles.circleSm1}`} />
        </animated.div>
        <animated.div
          style={{
            transform: inView ? animation.xy.interpolate(trans2) : 'none',
          }}
          className={`${styles.circleWrapper} ${styles.circleSm2Pos}`}
        >
          <div className={`${styles.circle} ${styles.circleSm2}`} />
        </animated.div>
        <animated.div
          style={{
            transform: inView ? animation.xy.interpolate(trans3) : 'none',
          }}
          className={`${styles.circleWrapper} ${styles.circleMdPos}`}
        >
          <div className={`${styles.circle} ${styles.circleMd}`} />
        </animated.div>
      </div>

      <Info {...infoAssets} />
    </section>
  );
}

Modal = ({ children, onClose, className, shouldClose }) => {
  const [show, setShow] = useState(false)
  const [shouldCloseInt, setShouldCloseInt] = useState(false)

  const bgProps = useSpring({
    config: { duration: 150 },
    opacity: show ? 0.7 : 0
  })

  const modalProps = useSpring({
    config: { mass: 0.75, tension: 300, friction: 20 },
    opacity: show ? 1 : 0,
    transform: show ? 'translate3d(0px,0,0)' : 'translate3d(0,-100px,0)'
  })

  const el = useRef(document.createElement('div'))

  function doClose() {
    setShow(false)
    return setTimeout(onClose, 150)
  }

  useEffect(() => {
    document.body.appendChild(el.current)
    document.getElementById('app').style.filter = 'blur(2px)'
    function onKeyDown(e) {
      // Esc
      if (e.keyCode === 27) {
        doClose()
      }
    }
    document.addEventListener('keydown', onKeyDown)
    setShow(true)
    return () => {
      document.getElementById('app').style.filter = ''
      document.removeEventListener('keydown', onKeyDown)
      el.current.parentElement.removeChild(el.current)
    }
  }, [el])

  useEffect(() => {
    let timeout
    if (shouldClose || shouldCloseInt) {
      timeout = doClose()
    }
    return () => clearTimeout(timeout)
  }, [el, shouldClose, shouldCloseInt])

  const cmp = (
    <>
      <animated.div className="modal-backdrop" style={bgProps} />
      <animated.div
        className="modal d-block"
        tabIndex="-1"
        style={modalProps}
        onMouseDown={() => setShouldCloseInt(true)}
      >
        <div
          onMouseDown={(e) => e.stopPropagation()}
          className={`modal-dialog modal-dialog-centered ${className || ''}`}
          role="document"
        >
          <div className="modal-content">{children}</div>
        </div>
      </animated.div>
    </>
  )

  return createPortal(cmp, el.current)
}

Landing = ({ history }) => {
  //react spring stuff
  const calc = (x, y) => [
    -(y - window.innerHeight / 2) / 20,
    (x - window.innerWidth / 2) / 20,
    1.1,
  ];
  const trans = (x, y, s) =>
    `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`;
  const [props, set] = useSpring(() => ({
    xys: [0, 0, 1],
    config: { mass: 5, tension: 350, friction: 40 },
  }));
  //

  return (
    //react spring stuff
    <animated.div
      onMouseMove={({ clientX: x, clientY: y }) => set({ xys: calc(x, y) })}
      onMouseLeave={() => set({ xys: [0, 0, 1] })}
      style={{ transform: props.xys.interpolate(trans) }}
    >
      <Container fluid className="container" style={{ marginTop: '20vh' }}>
        <div className="mt-5">
          <h1 className="d-flex justify-content-center">
            {' '}
            Welcome to SWEetHearts!{' '}
          </h1>
          <br />
          <h2 className="mb-5 d-flex justify-content-center">
            {' '}
            A place where developers make their dreams come true{' '}
          </h2>
          <br />
        </div>
        <div className="mt-5 d-flex justify-content-center">
          <Button
            className="w-25"
            onClick={() => redirectToPath(history, '/explore')}
            size="lg"
            variant="outline-primary"
            block
          >
            Start Exploring
          </Button>
        </div>
      </Container>
    </animated.div>
  );
}

AnimatedCard = animated(_Card)

OptionsDialog = ({
  hide,
  options,
  children,
  title,
  cancelButton = true,
}) => {
  const transitions = useTransition(true, null, {
    from: { transform: 'scale(1.2)', opacity: 0.5 },
    enter: { transform: 'scale(1)', opacity: 1 },
    leave: { opacity: 0 },
    config: {
      mass: 1,
      tension: 500,
      friction: 30,
    },
  });

  return transitions.map(({ item, key, props }) => (
    <animated.div style={props} key={key} className="options-dialog">
      {title && (
        <header className="options-dialog__title">
          <h1 className="heading-3">{title}</h1>
          {!cancelButton && (
            <TextButton style={{ fontSize: '3rem' }} onClick={() => hide()}>
              &#10005;
            </TextButton>
          )}
        </header>
      )}
      {children}
      {options.map((option, idx) => {
        const buttonClassNames = classNames({
          'options-dialog__button': true,
          'options-dialog__button--warning': option.warning,
          [option.className]: option.className,
        });
        return (
          <button
            onClick={(event) => {
              if (option.hasOwnProperty('onClick')) {
                event.stopPropagation();
                option.onClick();
                hide();
              }
            }}
            className={buttonClassNames}
            key={idx}
          >
            {option.text}
          </button>
        );
      })}
      {cancelButton && (
        <button
          className="options-dialog__button"
          onClick={(event) => {
            event.nativeEvent.stopImmediatePropagation();
            hide();
          }}
        >
          Cancel
        </button>
      )}
    </animated.div>
  ));
}

MenuExpanded = (props) => {
  const { firstName, lastName, corporateName, image, id } = useSelector(
    (state) => state.authState
  );
  const history = useHistory();
  const dispatch = useDispatch();
  /** start of animation section */
  const [springProps, set] = useSpring(() => ({
    transform: "translate(100%)",
  }));
  useEffect(() => {
    set({
      transform: props.displayed ? "translate(0%)" : "translate(100%)",
    });
  }, [props.displayed, set]);
  /** end of animation section */
  return (
    <>
      <animated.div className="menu-container-show" style={springProps}>
        <div className="user-group-menu">
          <div className="user-icon-menu">
            {/* <p>T</p> */}
            <img src={image ? image : user_icon} alt="" />
          </div>
          <h5
            onClick={() => {
              history.push(`/user/${id}`);
            }}
          >
            {firstName ? `${firstName} ${lastName}` : corporateName}
          </h5>
        </div>
        <div className="message-menu">
          <div className="message-icon">
            <img src={chat_icon} alt="" />
          </div>
          <h5>Message</h5>
        </div>
        <div className="notification-menu">
          <div className="notification-icon">
            <img src={bell_icon} alt="" />
          </div>
          <h5>Notification</h5>
        </div>
        <Button
          className="logout-btn"
          variant="danger"
          onClick={() => {
            dispatch(logout());
          }}
        >
          Log Out
        </Button>
      </animated.div>
    </>
  );
}

function BankSyncStatus({ accountsSyncing }) {
  let name = accountsSyncing
    ? accountsSyncing === '__all'
      ? 'accounts'
      : accountsSyncing
    : null;

  const transitions = useTransition(name, null, {
    from: { opacity: 0, transform: 'translateY(-100px)' },
    enter: { opacity: 1, transform: 'translateY(0)' },
    leave: { opacity: 0, transform: 'translateY(-100px)' },
    unique: true
  });

  return (
    <View
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        marginTop: 5,
        alignItems: 'center',
        zIndex: 501
      }}
    >
      {transitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div key={key} style={props}>
              <View
                style={{
                  borderRadius: 4,
                  backgroundColor: colors.b9,
                  color: colors.b1,
                  padding: '5px 13px',
                  flexDirection: 'row',
                  alignItems: 'center',
                  boxShadow: styles.shadow
                }}
              >
                <AnimatedRefresh
                  animating={true}
                  iconStyle={{ color: colors.b1 }}
                />
                <Text>Syncing {item}</Text>
              </View>
            </animated.div>
          )
      )}
    </View>
  );
}

export function InfoCard({ title, value, delta = null, small = false }) {
  const { _value, _delta } = useSpring({
    from: { _value: 0, _delta: 0 },
    to: {
      _value: value,
      _delta: delta || 0,
    },
    delay: 0,
    config: config.slow,
  });
  return (
    <Card>
      <CardBody className="flex flex-col">
        <div>
          <p
            className={clsx(
              small ? "mb-1 text-xs" : "mb-2 text-sm",
              "dark:text-gray-400 text-gray-600 font-medium"
            )}
          >
            {title}
          </p>
          <div className="flex">
            <animated.p
              className={clsx(
                small ? "text-base" : "text-lg",
                "dark:text-gray-200 text-gray-700 font-semibold"
              )}
            >
              {_value.interpolate((x) => Math.round(x))}
            </animated.p>
            {delta !== null && (
              <animated.span
                className={clsx(
                  small ? "text-xs" : "text-sm",
                  "ml-2 dark:text-gray-400 text-gray-600"
                )}
              >
                {_delta.interpolate((y) => {
                  const x = Math.round(y);
                  return x === 0 ? "-" : x > 0 ? `+${x}` : x;
                })}
              </animated.span>
            )}
          </div>
        </div>
      </CardBody>
    </Card>
  );
}

Cell = ({statistic, data, getTableStatistic, noDistrictData}) => {
  const total = getTableStatistic(data, statistic, 'total');
  const delta = getTableStatistic(data, statistic, 'delta');

  const spring = useSpring({
    total: total,
    delta: delta,
    config: SPRING_CONFIG_NUMBERS,
  });

  const statisticConfig = STATISTIC_CONFIGS[statistic];

  return (
    <div className="cell statistic">
      {statisticConfig?.showDelta && (
        <animated.div
          className={classnames('delta', `is-${statistic}`)}
          title={delta}
        >
          {spring.delta.to((delta) =>
            !noDistrictData || !statisticConfig.hasPrimary
              ? delta > 0
                ? '\u2191' + formatNumber(delta, statisticConfig.format)
                : delta < 0
                ? '\u2193' +
                  formatNumber(Math.abs(delta), statisticConfig.format)
                : ''
              : ''
          )}
        </animated.div>
      )}

      <animated.div className="total" title={total}>
        {spring.total.to((total) =>
          !noDistrictData || !statisticConfig.hasPrimary
            ? formatNumber(total, statisticConfig.format, statistic)
            : '-'
        )}
      </animated.div>
    </div>
  );
}

render() {
    const { isVisible } = this.state;
    const { variant } = this.props;

    const isMobile = !isUndefined(global.window)
      ? global.window.innerWidth < 768
      : false;

    // console.log('images', product.variant.images);
    const images = variant.images
      ? variant.images.map(image => ({
          original: image.asset.fluid.src,
          thumbnail: image.asset.fluid.src,
        }))
      : [];
    // console.log('images 2', images);

    return (
      <Container>
        <Spring
          native
          from={{ opacity: 0, marginLeft: -100 }}
          to={{
            opacity: isVisible ? 1 : 0,
            marginLeft: isVisible ? 0 : -100,
          }}
        >
          {styles => (
            <animated.div style={styles}>
              <ImageGallery
                items={images}
                thumbnailPosition="bottom"
                showPlayButton={false}
                showNav={false}
                showThumbnails={!isMobile}
                showFullscreenButton={!isMobile}
                showBullets={isMobile}
                lazyLoad
              />
            </animated.div>
          )}
        </Spring>
      </Container>
    );
  }

AnimatedDialogOverlay = animated(DialogOverlay)

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

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>
  )
}