koss-lebedev

const container: Variants = {
  active: {
    background: "#ff00b1",
    transition: {
      staggerChildren: 0.5
    }
  },
  disabled: {
    background: "#0D00FF"
  }

koss-lebedev

const container: Variants = {
  active: {
    background: "#ff00b1",
    transition: {
      staggerChildren: 0.5,
      when: "beforeChildren"
    }
  },
  disabled: {
    background: "#0D00FF"

koss-lebedev

import * as React from "react"
import { Quote } from "./canvas"

export function KanyeQuote() {
    const [quote, setQuote] = React.useState("")

    React.useEffect(() => {
        // load quote from local storage if it's there, fetch from API otherwise
        if (localStorage.getItem("quote")) {
            setQuote(localStorage.getItem("quote"))

koss-lebedev

const clamp = (value: number, clampAt: number = 30) => {
  if (value > 0) {
    return value > clampAt ? clampAt : value;
  } else {
    return value < -clampAt ? -clampAt : value;
  }
};

koss-lebedev

const movies = [
  "/breaking-bad.webp",
  "/the-leftovers.jpg",
  "/game-of-thrones.jpg",
  "/true-detective.jpg",
  "/walking-dead.jpg"
];

const App = () => {
  return (

koss-lebedev

::-webkit-scrollbar {
  width: 0px;
}

.container {
  display: flex;
  overflow-x: scroll;
  width: 100%;
}

koss-lebedev

import { animated, useSpring } from "react-spring";

const App = () => {
  const style = useSpring({
    from: {
      transform: "rotateY(0deg)"
    },
    transform: "rotateY(25deg)"
  });

koss-lebedev

const style = useSpring({
  from: {
    transform: "perspective(500px) rotateY(0deg)"
  },
  transform: "perspective(500px) rotateY(25deg)"
});

koss-lebedev

.container {
  display: flex;
  overflow-x: scroll;
  width: 100%;
  padding: 20px 0;
}

koss-lebedev

const [style, set] = useSpring(() => ({
  transform: "perspective(500px) rotateY(0deg)"
}));