jxnblk / mdx-deck

♠️ React MDX-based presentation decks
https://mdx-deck.jxnblk.com
MIT License
11.32k stars 605 forks source link

CodeSurfer animations briefly flash all at once when entering a slide #738

Open micheleb opened 4 years ago

micheleb commented 4 years ago

Hi!

First of all, thanks for the great tool! :)

I found an issue with the latest (4.1.1) version of mdx-deck, and I'm also submitting a PR to fix it.

If you have a slide with a <Steps> component before a slide with a (multi-step) <CodeSurfer> component, as soon as the slide with the <CodeSurfer> component is loaded, you'll see all CodeSurfer animations played back in reverse, very quickly.

To see this happen, install CodeSurfer in the demo project, and add these two slides to demo.mdx:

---

# Steps

<Steps>

- these
- are
- some
- steps

</Steps>

---

# CodeSurfer

<CodeSurfer>

```js
console.log("hey!");
```

```js
console.log("hey!");
console.log("I'm a test");
```

```js
console.log("hey!");
console.log("I'm a test");
console.log("for CodeSurfer");
```

```js
console.log("See all those animations at the beginning?");
```

```js
console.log("they shouldn't show up");
```

</CodeSurfer>

---

I'm creating a new PR to fix this behaviour. It worked for me, but I don't know if it's the best way to fix it :)