react-spring#interpolate JavaScript Examples

The following examples show how to use react-spring#interpolate. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AnimatedCircle.js    From likelihood with MIT License 6 votes vote down vote up 
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"
    />
  );
}
Example #2
Source File: AnimatedMuPath.js    From likelihood with MIT License 6 votes vote down vote up 
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} />
  );
}
Example #3
Source File: AnimatedPath.js    From likelihood with MIT License 6 votes vote down vote up 
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" />
  );
}
Example #4
Source File: Slide.js    From react-instagram-zoom-slider with MIT License 6 votes vote down vote up 
export default function Slide({ children, onScale, minScale, maxScale }) {
  const [element, scale, translateX, translateY, middleTouchOnElement] = useZoom({
    minScale,
    maxScale,
    onScale,
  })

  return (
    <AnimatedSlide
      ref={element}
      style={{
        transform: interpolate(
          [scale, translateX, translateY],
          (sc, x, y) => `translate3d(${x}px, ${y}px, 0) scale3d(${sc}, ${sc}, 1)`
        ),
        transformOrigin: middleTouchOnElement.interpolate((x, y) => `${x}px ${y}px 0`),
      }}
    >
      {children}
    </AnimatedSlide>
  )
}
Example #5
Source File: HomeBackground.js    From ladybug-website with MIT License 5 votes vote down vote up 
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>
  )
}