Skip to content
Home

HeightAnimation

Info
Demos
Properties
Events

Demos

Animation during height changes

This example shows how you easily can enhance the user experience. Here we also use showOverflow to avoid hidden overflow during the animation.

Code Editor
const Example = () => {
  const [showMe, setShowMe] = React.useState(true)
  return (
    <>
      <HeightAnimation showOverflow>
        {showMe ? (
          <Button
            onClick={() => {
              setShowMe(!showMe)
            }}
          >
            Click me!
          </Button>
        ) : (
          <Anchor
            onClick={() => {
              setShowMe(!showMe)
            }}
          >
            No, click me!
          </Anchor>
        )}
      </HeightAnimation>

      <P top>Look at me 👀</P>
    </>
  )
}
render(<Example />)

SyntaxError: Unexpected token (1:3)

Basic open/close

This example removes its given children, when open is open={false}.

Code Editor
const Example = () => {
  const [openState, setOpenState] = React.useState(false)
  const [isOpen, setIsOpen] = React.useState(openState)
  const [contentState, setContentState] = React.useState(false)
  const onChangeHandler = ({ checked }) => {
    setOpenState(checked)
  }
  return (
    <>
      <ToggleButton checked={openState} on_change={onChangeHandler} right>
        Open/close
      </ToggleButton>
      <ToggleButton
        checked={contentState || !openState}
        disabled={!isOpen}
        on_change={({ checked }) => {
          setContentState(checked)
        }}
        space={{
          top: true,
          bottom: true,
        }}
      >
        Change height inside
      </ToggleButton>

      <Section style_type="lavender" top>
        <HeightAnimation open={openState} onOpen={setIsOpen}>
          <Section spacing style_type="lavender">
            <P space={0}>Your content</P>
          </Section>
          {contentState && <P space={0}>More content</P>}
        </HeightAnimation>
      </Section>

      <P top>Look at me 👀</P>
    </>
  )
}
render(<Example />)

SyntaxError: Unexpected token (1:3)

Keep in DOM

When providing keepInDOM={true}, your nested content will never be removed from the DOM. But rather be "hidden" with visually: hidden and aria-hidden.

Code Editor
const Example = () => {
  const [openState, setOpenState] = React.useState(true)
  const [isOpen, setIsOpen] = React.useState(openState)
  const [contentState, setContentState] = React.useState(false)
  const onChangeHandler = ({ checked }) => {
    setOpenState(checked)
  }
  return (
    <>
      <ToggleButton checked={openState} on_change={onChangeHandler} right>
        Open/close
      </ToggleButton>
      <ToggleButton
        checked={contentState || !openState}
        disabled={!isOpen}
        on_change={({ checked }) => {
          setContentState(checked)
        }}
        space={{
          top: true,
          bottom: true,
        }}
      >
        Change height inside
      </ToggleButton>

      <StyledSection style_type="lavender" top>
        <HeightAnimation
          open={openState}
          keepInDOM={true}
          duration={1000}
          onOpen={setIsOpen}
        >
          <Section spacing style_type="lavender">
            <P space={0}>Your content</P>
          </Section>
          {contentState && <P space={0}>More content</P>}
        </HeightAnimation>
      </StyledSection>
    </>
  )
}
const StyledSection = styled(Section)`
  .content-element {
    transition: transform 1s var(--easing-default);
    transform: translateY(-2rem);

    padding: 4rem 0;
  }

  .dnb-height-animation--parallax .content-element {
    transform: translateY(0);
  }
`
render(<Example />)

SyntaxError: Unexpected token (1:3)