slideElement at -1, keystrokes don't increment

[craig-o-curtis]

Question

I am trying to animate simple elements on keypress but it isn't working. http://localhost:3000/?immediate=true&slide=4&slideElement=-1 The slideElement is at -1, and on pressing different keys, it doesn't increment.

I scoured the docs but cannot find any examples of how to do this. I'm hoping this is something easy. I've tried adding a Stepper component too, but that doesn't seem to do anything. Could you add a clearer example to the docs please?

Background Info/Attempts

I'm trying with a basic component using Appear and Text:

      <Appear
        elementNum={0}
        transitionEffect={{ to: { opacity: 1 }, from: { opacity: 0 } }}
      >
        <Text>0</Text>
      </Appear>
      <Appear
        elementNum={1}
        transitionEffect={{ to: { opacity: 1 }, from: { opacity: 0 } }}
      >
        <Text>1</Text>
      </Appear>
      <Appear
        elementNum={2}
        transitionEffect={{ to: { opacity: 1 }, from: { opacity: 0 } }}
      >
        <Text>2</Text>
      </Appear>

Attempt with Stepper

        <Stepper values={[1, 2, 3]}>
          {(value, step) => {
            console.log("value " + value);
            console.log("step " + step);
            return (
              <>
                <Appear
                  elementNum={0}
                  transitionEffect={{
                    to: { opacity: 1 },
                    from: { opacity: 0 },
                  }}
                >
                  <Text>0</Text>
                </Appear>
                <Appear
                  elementNum={1}
                  transitionEffect={{
                    to: { opacity: 1 },
                    from: { opacity: 0 },
                  }}
                >
                  <Text>1</Text>
                </Appear>
                <Appear
                  elementNum={2}
                  transitionEffect={{
                    to: { opacity: 1 },
                    from: { opacity: 0 },
                  }}
                >
                  <Text>2</Text>
                </Appear>
                <CodePaneDisplay
                  codeExample={codeExample}
                  highlight={{ highlightStart: 10, highlightEnd: 12 }}
                />
              </>
            );
          }}
        </Stepper>