ChronicleHQ Scroll Text Reveal Animation

August 27, 2023

Scroll down

In Chronicle everything is made with Blocks that come with pixel perfect design, interactivity and motion out of the box. Instead of designing from scratch, simply choose the right one from our library of blocks and see the magic unfold.

Scroll up

Packages

npm imotion

<div>
  <div className='dummy-box' style={{ height: '800px' }}>
    Scroll down
  </div>
  <div ref={textRevealWrapperRef} className='textreveal-wrapper'>
    <div className='textreveal-sticky'>
      <div className='textreveal-inner'>
        <div className='ghost-text'>{text}</div>
        <div ref={wordsContainer} className='invisible-text'>
          {splittedText.map((word, i) => (
            <span key={i} style={{ opacity: 0 }}>
              {word}
            </span>
          ))}
        </div>
      </div>
    </div>
  </div>
  <div className='dummy-box' style={{ height: '1200px' }}>
    Scroll up
  </div>
</div>