Can we have different durations in useSpring?

[mattfranciswork0]

Hi all,

is it possible to do something like:

  const spring = useSpring({
        from: {
            opacity: 0,   //Duration of 1000
            transform: translateX(-50%); //Duration of 3000
        },
        to: {
            opacity: 1,   //Duration of 1000
            transform: translateX(0%); ///Duration of 3000
        },
    
    });```

Both properties would execute together. Contrary to using useChain, where we would wait for a spring to complete before executing another spring.

[joshuaellis]

If you make a sandbox I could maybe help further. Off the top of my head what you're looking to do is have seperate configs for each key, i'm not sure if thats possible. You might need to use 2 springs and pass both props to the animated component. Alt this might work:

const [props, api] = useSpring(() => (
 {
  from: {opacity: 0, transformX: '-50%'}
 }
))

useEffect(() => {
 api.start({
  to: {opacity: 1},
  config: {duration: 1000}
 })
 api.start({
  to: {transformX: 0},
  config: {duration: 3000}
 })
})