Animate Height

Animate the height of a component when it's visible or hidden.

Default

Animate Height

Want to read the rest of this article?

<Component className="w-64 rounded-2xl border p-5">
  <p className="text-sand-11 mb-4 font-medium">
    Want to read the rest of this article?
  </p>
  <Button onClick={() => {}}>
    Read 
    more
  </Button>
  <Component isVisible={false}>
    <Component className="flex w-full flex-wrap justify-start gap-3 pt-4" initial={{"opacity":0}} animate={{"opacity":1,"transition":{"delay":0.2,"duration":0.2,"ease":"easeInOut"}}}>
      <p className="text-sand-11 text-sm">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
      </p>
    </Component>
  </Component>
</Component>