Ali Posts - Answer Overflow

Ali

Explore posts from servers

KPCKevin Powell - Community TtRPC TTCTheo's Typesafe Cult

Posts Comments

KPCKevin Powell - Community

•Created by Ali on 6/24/2024 in #front-end

Any idea how to achieve these animation?

these lines animation are now quite trendy, I don't think they do it manually

7 replies

KPCKevin Powell - Community

•Created by Ali on 6/20/2024 in #ui-ux

Product card feedback

8 replies

KPCKevin Powell - Community

•Created by Ali on 5/23/2024 in #ui-ux

Logo feedback

9 replies

KPCKevin Powell - Community

•Created by Ali on 5/16/2024 in #ui-ux

What is your take on the gray color?

11 replies

KPCKevin Powell - Community

•Created by Ali on 5/13/2024 in #front-end

Copied a hover effect but is not the same as the original

original: https://fossheim.io/ button label: collaborate Playground: https://play.tailwindcss.com/ye0B1eQNlY

4 replies

KPCKevin Powell - Community

•Created by Ali on 5/12/2024 in #ui-ux

Does the following section help with the landing page?

14 replies

KPCKevin Powell - Community

•Created by Ali on 5/2/2024 in #ui-ux

What do you think of the background?

7 replies

KPCKevin Powell - Community

•Created by Ali on 4/30/2024 in #ui-ux

Which one is easier and simpler to read?

75 replies

KPCKevin Powell - Community

•Created by Ali on 4/27/2024 in #front-end

Trying to get the cards over each other properly

I want to set the back-card under the front-card with wider and shorter than the front-card, but couldn't getting anywhere... The back-card is in the demo not showing properly as in the pic https://play.tailwindcss.com/9j1fku0Afd

4 replies

KPCKevin Powell - Community

•Created by Ali on 4/4/2024 in #front-end

When using Next Image, and the src is SVG, fill color doesn't work

3 replies

KPCKevin Powell - Community

•Created by Ali on 4/4/2024 in #ui-ux

What are your thoughts on this?

39 replies

KPCKevin Powell - Community

•Created by Ali on 3/22/2024 in #ui-ux

I am using framer motion, but the animation on exist for front-card is not working

//---------------------------------------------------
const FrontCard = ({ phrase, open }) => {
  return (
    <motion.div
      onClick={() => open()}
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { duration: 1 } }}
      // here is not working...
      exit={{
        rotateY: -180,
        transition: { duration: 1, ease: "easeInOut" },
        opacity: 0,
      }}
    >
      {phrase}
    </motion.div>
  );
};
//---------------------------------------------------
const BackCard = ({ definition, id, term, remove }) => {
  const { play, isFetching } = useVoiceContext({ text: term });
  return (
    <motion.div
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{
        rotateY: -180,
      }}
      animate={{
        rotateY: 0,
        transition: { duration: 1, ease: "easeInOut" },
      }}
    >
      rest...
    </motion.div>
  );
};
//---------------------------------------------------
const FlipCard = (props) => {
  const [opened, handlers] = useDisclosure(false); // from Mantine
  return (
    <div
      style={{
        perspective: "1000px",
      }}
    >
      <AnimatePresence>
        {!opened ? (
          <FrontCard {...props} />
        ) : (
          <BackCard {...props} />
        )}
      </AnimatePresence>
    </div>
  );
};

//---------------------------------------------------
const FrontCard = ({ phrase, open }) => {
  return (
    <motion.div
      onClick={() => open()}
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1, transition: { duration: 1 } }}
      // here is not working...
      exit={{
        rotateY: -180,
        transition: { duration: 1, ease: "easeInOut" },
        opacity: 0,
      }}
    >
      {phrase}
    </motion.div>
  );
};
//---------------------------------------------------
const BackCard = ({ definition, id, term, remove }) => {
  const { play, isFetching } = useVoiceContext({ text: term });
  return (
    <motion.div
      style={{
        backfaceVisibility: "hidden",
        transformStyle: "preserve-3d",
      }}
      initial={{
        rotateY: -180,
      }}
      animate={{
        rotateY: 0,
        transition: { duration: 1, ease: "easeInOut" },
      }}
    >
      rest...
    </motion.div>
  );
};
//---------------------------------------------------
const FlipCard = (props) => {
  const [opened, handlers] = useDisclosure(false); // from Mantine
  return (
    <div
      style={{
        perspective: "1000px",
      }}
    >
      <AnimatePresence>
        {!opened ? (
          <FrontCard {...props} />
        ) : (
          <BackCard {...props} />
        )}
      </AnimatePresence>
    </div>
  );
};