adrianmcli / react-reveal-text

✨ A small react library for animating the revealing of text.
https://adrianmcli.github.io/react-reveal-text/
186 stars 14 forks source link

Height is collapsed until render #4

Closed ndimatteo closed 4 years ago

ndimatteo commented 4 years ago

Hey there @adrianmcli ! First off, awesome job on this little library. I'm loving it!

I did have one question that I'm hoping you can shed some light on:

  1. I'm using the CharacterReveal in a Gatsby-powered site.
  2. The animation (canPlay) is triggered via state, which is subsequently set through a useEffect after a short delay.

However, I'm noticing on my production server that there is a small "jump" where before the reveal element is built there is nothing visible, collapsing my page height briefly until react-reveal-text renders to the page:

jump-reveal

Here's a live version for you to preview as well: https://the-fold-web.netlify.app/

And here's my code for the react-reveal-text component:

<CharacterReveal
  animateOpacity
  canPlay={isRevealed}
  characterOffsetDelay={60} // ms
  characterWordSpacing={'.25em'}
  copy={[
    'A collection of',
    'cutting edge homes',
    'in the heart of Shaw'
  ]}
  direction={'bottom'}
  duration={600} // ms
  ease={
    'cubic-bezier(0.5848375451263538,-0.003374999999999906,0.16606498194945848,1.012625)'
  }
  offset={'1em'}
  multilineMasking
  multilineOffsetDelay={350} // ms
/>

Let me know what you think, happy to provide more info if needed ✌️

ndimatteo commented 4 years ago

Closing, realizing this is the wrong repo 🤦