Theo's Typesafe Cult•3y ago

Copying the Auth0 animation

I'm a complete noob when it comes to animations, but am starting to use Framer motion in a project and want to copy the animation on the Auth0 website https://auth0.com/ Any idea how to accomplish this? So far I have this, but it's not working as I thought it would:

interface TextLoopProps {
  texts: string[];
}

export const TextLoop: React.FC<TextLoopProps> = ({ texts }) => {
  const [index, setIndex] = React.useState<number>(0);

  React.useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === texts.length) {
        next = 0;
      }
      setIndex(next);
    }, 3 * 1000);
  }, [index, setIndex, texts]);

  return (
    <Box position="relative" width="max-content">
      <motion.span
        style={{ position: "absolute" }}
        variants={{
          enter: {
            translateY: "20px",
            opacity: 0,
          },
          center: {
            zIndex: 1,
            translateY: 0,
            opacity: 1,
          },
          exit: {
            zIndex: 0,
            opacity: 0,
            translateY: "-20px",
          },
        }}
        key={index}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          y: { type: "spring", stiffness: 300, damping: 200 },
          opacity: { duration: 0.5 },
        }}
      >
        {texts[index]}
      </motion.span>
    </Box>
  );
};

interface TextLoopProps {
  texts: string[];
}

export const TextLoop: React.FC<TextLoopProps> = ({ texts }) => {
  const [index, setIndex] = React.useState<number>(0);

  React.useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === texts.length) {
        next = 0;
      }
      setIndex(next);
    }, 3 * 1000);
  }, [index, setIndex, texts]);

  return (
    <Box position="relative" width="max-content">
      <motion.span
        style={{ position: "absolute" }}
        variants={{
          enter: {
            translateY: "20px",
            opacity: 0,
          },
          center: {
            zIndex: 1,
            translateY: 0,
            opacity: 1,
          },
          exit: {
            zIndex: 0,
            opacity: 0,
            translateY: "-20px",
          },
        }}
        key={index}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          y: { type: "spring", stiffness: 300, damping: 200 },
          opacity: { duration: 0.5 },
        }}
      >
        {texts[index]}
      </motion.span>
    </Box>
  );
};

Auth0

Auth0: Secure access for everyone. But not just anyone.

Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core business.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Copying the Auth0 animation