Changing slide animation about mdx-deck HOT 9 CLOSED

For per-slide animations, I was imagining something more like how layouts work for components, e.g.

import { Fade } from 'mdx-deck/animations'

export default Fade

# Fade In/Out
---

# No animation

For all slides, the other thing I'm thinking is adding a default CSS animation to a theme, maybe something like:

// example theme
import baseTheme from 'mdx-docks/themes'

export default {
  ...baseTheme,
  animationDuration: '.4s',
  animationEnter: {
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  },
  animationLeave: {
    // ...animation keyframes
  }
}

from mdx-deck.

I like the idea of adding to the theme. I'm a bit confused by export default Fade, though - if I already have a layout on that slide, I thought ES6 exports could have only one default?

from mdx-deck.

I've started looking at this, one thing I can't quite get is why all the styled components are using a function call type of construction rather than the more common tagged template literal construction - @jxnblk are you able to shed some light?

from mdx-deck.

Thanks! Yeah, I suspect custom animations could maybe be handled with components that can be exported as layouts (using CSS animations, etc) or maybe through custom theme configurations. I haven't thought a ton about it yet, so would like to see some proposals/APIs before moving forward with this sort of thing – as for the syntax, I find it easier to read and type in JS as opposed to using an embedded DSL

from mdx-deck.

How do you feel about export { fade as animation } from 'mdx-deck/animations'?

from mdx-deck.

Yeah, I don't yet understand how default exports could accommodate both a custom layout and a specific slide transition.

from mdx-deck.

You can use composition in React/JSX to nest one component inside the other

from mdx-deck.

I attempted to get something like this working as a Layout but the problem is that Layouts don't receive any of their parent props, so there's no way to know when the slide is active to fade in (since all slides are rendered already, just positioned off screen). I began exploring whether the slide animation can be moved into the Slide component but figured I'd ask if there's a better idea.

from mdx-deck.

Since v2 now uses Reach Router, slides do not transition by default. In order to add route transitions, existing solutions for Reach Router should work

from mdx-deck.