AnimatedContent

A wrapper for content requiring simple animation. Animation begins on page load. Combine with Intersection Observer API or a trigger function to control animations.

AnimatedContent @"src/components/AnimatedContent"

Edit the props to see this component update live!

jsx

<AnimatedContent animation="fadeIn" delay="1000">
  <Box
    sx={{
      p: 3,
      height: "100px",
      width: "100%",
      bg: "secondary",
      display: "flex",
      alignItems: "center",
    }}
  >
    <AnimatedContent animation="slideFromRight" delay="3000">
      <Box sx={{ height: "50px", width: "50px", bg: "white" }} />
    </AnimatedContent>
  </Box>
</AnimatedContent>

<AnimatedContent animation="fadeIn" delay="1000">
  <Box
    sx={{
      p: 3,
      height: "100px",
      width: "100%",
      bg: "secondary",
      display: "flex",
      alignItems: "center",
    }}
  >
    <AnimatedContent animation="slideFromRight" delay="3000">
      <Box sx={{ height: "50px", width: "50px", bg: "white" }} />
    </AnimatedContent>
  </Box>
</AnimatedContent>