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 />)

Edit on GitHub

#HeightAnimation

#Demos

#Animation during height changes

#Basic open/close

#Keep in DOM

#Find collapsed content