Skip to content

Extending ScrollPage height #31

@beamercola

Description

@beamercola

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions