Skip to content

Conversation

@Grimones
Copy link
Contributor

Hi

This PR implements step counter for <Appear /> in <Slide />
To use simply add getAppearStep prop to <Slide /> which is a callback and returns steps.

<Slide ... getAppearStep={ steps => /* do something */ } />

Also added a slide to example.

Based on this branch https://github.com/pedrottimark/spectacle/tree/step-visitor

Use case can be like mine. I'm writing a presentation about ThreeJS and i have a canvas with renderer on slide background. On each step of text appearing i want to do something in ThreeJS.
I have a component with ThreeJS scene
<CubeDemo step={this.state.cubeDemoStep} />
And on each step i do something different in scene

animate() {
    const delta = this.clock.getDelta();
    if (this.step === 1) {
      this.mesh.rotation.x += delta;
    }
    else if (this.step === 2) {
      this.mesh.rotation.z += delta;
    }
    else if (this.step === 3) {
      this.mesh.rotation.x += delta;
      this.mesh.rotation.z += delta;
    }
}

@kenwheeler kenwheeler merged commit 2ff9a37 into FormidableLabs:master Oct 3, 2017
@kenwheeler
Copy link
Contributor

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants