search

1000ship / react-scroll-motion

🎞 Easy to make scroll animation
https://1000ship.github.io/react-scroll-motion
MIT License
422 stars 47 forks source link

Extending ScrollPage height #31

Open beamercola opened 2 years ago

beamercola commented 2 years ago

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>
)
AmreshSinha commented 2 years ago

👍 I need a solution for this too.

LeannaCodes commented 2 years ago

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