Changing slide animation

[dan1elhughes]

Hey, love this project! Is there a way to change the slide animation, ideally through some configuration like export { fade as animation } from 'mdx-deck/animations? If not I'd like to look into working on that, if I could have a few pointers 🤓

[dan1elhughes]

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?

[jxnblk]

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

[dan1elhughes]

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

[jxnblk]

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
  }
}

[dan1elhughes]

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?

[programbo]

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

[jxnblk]

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

[filoxo]

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.

[jxnblk]

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