react-spring: using useChain to scale and translate

Question

I am currently using useTransition to make my mobile navigation appear:

const MobileNav = ({show, toggle, styles}) => {
  let transition = useTransition(show, null, {
    from: {transform: 'translateY(-100%) scale(0.7)', ...styles},
    enter: {transform: 'translateY(0) scale(1)'},
    leave: {transform: 'translateY(100%) scale(0.7)'}
  })

  return (
    <>
      {transition.map(({item, props, key}) => {
        return item ? (
          <animated.div className="navbar__menu_mob" key={key} style={props}>
            ...someHtml
          </animated.div>
        ) : null
      })}
    </>
  )
}

With this code the scale and the translate animate at the same time. My end goal is to chain them so the scale is first then the translateY is after. From the examples by react-spring the best way seems to be wrapping the my first animated.div in another animated.div and chaining them using useChain.

I seem to be struggling to understand the best way to chain my animations together. Ideally I wouldn't have to wrap what I currently have in another animated.div. I could do with some guidance.

score 0 · Answer 1 · answered Apr 06 '20 at 13:38

I managed to figure this out without using useChain().

I used multi stage transitions:

let transition = useTransition(show, null, {
    from: {translate: '-100%', scale: 0.7, ...styles},
    enter: item => async(next) => {
      await next({translate: '0%'})
      await next({scale: 1})
    },
    leave: item => async(next) => {
      await next({scale: 0.7})
      await next({translate: '100%'})
    }
  })

Then I had to interpolate the styles like so:

{transition.map(({item, props, key}) => {
        return item ? (
          <animated.div className="navbar__menu_mob" key={key} style={{
            transform: interpolate([
              props.translate.interpolate(v => `translateY(${v})`),
              props.scale.interpolate(v => `scale(${v})`)
            ], (translate, scale) => `${translate} ${scale}`),
            ...props
            }}></animated.div> )
        : null })}

react-spring: using useChain to scale and translate

1 Answers1