jxnblk / mdx-deck

♠️ React MDX-based presentation decks

Home Page:https://mdx-deck.jxnblk.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CodeSurfer animations briefly flash all at once when entering a slide

micheleb opened this issue · comments

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