react-scroll-motion icon indicating copy to clipboard operation
react-scroll-motion copied to clipboard

Extending ScrollPage height

Open beamercola opened this issue 3 years ago • 2 comments

I'm trying to make content "stick" on the screen longer. Blank > Fade In > Hold > Fade Out > Blank. For me the Hold step is the content, and the second it's opacity hits 1, it starts stepping back down. I'd like for them to scroll another page length before it starts fading out.

StickyOut gets me halfway there, but then it suddenly disappears.

const Hero = () => (
  <ScrollContainer>
    <ScrollPage>{/* Blank Screen */}</ScrollPage>
    <ScrollPage>
      <Animator animation={batch(FadeIn(), ZoomIn(0.9, 1), StickyIn()}>
          <h1>Welcome</h1>
      </Animator>
    </ScrollPage>
    <ScrollPage>{/* Blank Screen */}</ScrollPage>
  </ScrollContainer>
)

beamercola avatar Jun 29 '22 18:06 beamercola

👍 I need a solution for this too.

AmreshSinha avatar Jul 09 '22 13:07 AmreshSinha

I also need help with this. It's fading before all the content has been shown.

LeannaCodes avatar Jul 11 '22 19:07 LeannaCodes