Best way to do transitions with Fela

[martyjg]

Hi all!

I want to add a transition so that on each render a piece of the UI will fade in. Essentially like a key frame animation (if that is what's advisable). The app is a quiz and I want the answers to fade in as the state changes between questions.

It's a react project and what I've gathered from the documentation is that I should use useFela and also use the renderer method renderKeyframe.

Here is my code:

const Question = ({ id, answers, copy, handleAnswerClick }) => {
  const { css, renderer } = useFela()

  const keyframe = () => ({
    from: {
      transform: 'translateY(50%)',
      opacity: 0
    },
    to: {
      transform: 'translateY(0)',
      opacity: 1
    }
  })

  const fadeSlideUp = renderer.renderKeyframe(keyframe) // storing the animation name

  return (
    <>
      <p className={css(styles.question)}>
        {copy}
      </p>
      <div className={css(styles.buttonContainer(fadeSlideUp))}>
        {answers.map((answer, idx) => {
          return (
            <BoxedAction
              key={`${id}-${idx}`}
              extend={styles.button}
              onClick={() => handleAnswerClick(answer)}
              ele='button'>
              {answer.copy}
            </BoxedAction>
          )
        })}
      </div>
    </>
  )
}

So my answers now slide up and fade in on each render.

But the downside here is my keyframe definition is inside my component. I would like to have it at a more global level as how my fonts are rendered.

If I do render the keyframe at a more global level, should I just remember the atomic animation name (e.g. 'k1')? Or is there a way to give them a better name to reuse later in the code (like fonts have a font-family name to use).

Or should I keep the keyframe definition here in the component so I can pass the animation name ('k1') to the styles.buttonContainer function immediately when the key frame is rendered. Again the downside here is this approach is not reusable for other components.

Any advice would be greatly appreciated! thanks!

[robinweser]

Hey @martyjg,

I've been on a 3 week vacation, so sorry for the late response here.

Great question! Here's what I'd do:
Given that you want to reuse the same keyframe in multiple places, you're that the animation name is what needs to be stored somehow. Given how efficient the rendering process is, the impact of copy-pasting the code into many components actually wouldn't be noticeable, but thanks to React hooks we can solve that even better:

// note that the keyframe itself doesn't need to be inside of the function (or component respectively)
const keyframe = () => ({
  from: {
    transform: 'translateY(50%)',
    opacity: 0
  },
  to: {
    transform: 'translateY(0)',
    opacity: 1
  }
})

// maybe call it useFadeSlideInAnimationName for more clarity
function useFadeSlideIn() {
  const { renderer } = useFela()

  return renderer.renderKeyframe(keyframe) 
}

This can then be used like this:

function SomeComponent() {
  const { css } = useFela()
  const fadeSlideIn = useFadeSlideIn()

  return <div className={css({ animationName: fadeSlideIn })} />
}