HeightAnimation#

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.

Look at me 👀

const Example = () => {
  const [showMe, setShowMe] = 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 />)

Basic open/close#

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

Look at me 👀

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

      <Section variant="information" top>
        <HeightAnimation open={openState}>
          <Section
            innerSpace={{
              block: 'large',
            }}
            variant="information"
          >
            <P space={0}>Your content</P>
          </Section>
          {contentState && <P space={0}>More content</P>}
        </HeightAnimation>
      </Section>

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

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.

Your content

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

      <StyledSection variant="information" top>
        <HeightAnimation open={openState} keepInDOM={true} duration={1000}>
          <Section
            innerSpace={{
              block: 'large',
            }}
            variant="information"
          >
            <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 />)

Find collapsed content#

The openOnFind prop keeps collapsed content available to the browser's find-in-page feature using hidden="until-found". Search this page for “Findable banking content”. HeightAnimation opens the match itself, while the optional onBeforeMatch callback synchronizes the toggle's external state.

const Example = () => {
  const [openState, setOpenState] = useState(false)
  return (
    <>
      <ToggleButton
        checked={openState}
        aria-expanded={openState}
        aria-controls="open-on-find-content"
        onChange={({ checked }) => setOpenState(checked)}
      >
        Open content
      </ToggleButton>

      <HeightAnimation
        id="open-on-find-content"
        open={openState}
        openOnFind
        onBeforeMatch={() => setOpenState(true)}
      >
        <Space innerSpace>
          <Section variant="information" innerSpace>
            <P space={0}>Findable banking content</P>
          </Section>
        </Space>
      </HeightAnimation>
    </>
  )
}
render(<Example />)

Suggest an edit