Add transition prop examples

[sntg-p]

First I want to thank you Fernando for developing this library.

Second, I was having the Tried to synchronously call anonymous function from a different thread error when using Moti on Android. I was debugging for hours and the problem was that I incorrectly let IntelliSense import Easing from react-native instead of importing the one from react-native-reanimated (that exports worklet functions).

I just thought some examples in the docs/api/props.md file should be enough to clarify this. Would you like to talk about what could be useful examples to include in a pull request?

[nandorojo]

I’ve thought about something similar. I think it would be good to add a Customizing Animations page, borrowing from the transition page on framer-motion’s docs, since the API is inspired from there

[nandorojo]

I think this thread is good inspiration for examples: https://twitter.com/mattgperry/status/1547929223351844864?s=20&t=ChiVaucsyKp8MfRRW0VeJg

We can do the same thing framer does.

[jordandobson]

Would love to see an example of modifying the transition when applying the useDynamicAnimation hook.

is there a method to include an alternate transition for certain instances when calling animation.animateTo({ … }) ?

I know framer motion has the ability to add a transition prop with the animation object. I tried to see if that was available but it didn’t seem to work.

I’m firing two animations at the same time but I just want a small delay on one in certain instances. Essentially to override the default trans set on the transition prop.

Do you have any similar examples like this?

[nandorojo]

Well...sort of. Moti works more declaratively, meaning it doesn't let you set transitions based on certain specific animations, but rather based on certain states. However, I can think of some ways that you could make this work.

I would need to refactor the code a bit to allow this. However, this should work now, albeit using a private API by accessing the internal __state. A better use case for this approach would be to use useAnimationState probably, but it would also require a refactor.

With all that said, this will work now, and I can consider a refactor to expose this as a public API:

const animation = useDynamicAnimation(() => ({ opacity: 1 }))

const transition = useDerivedValue(() => { 
    const duration = animation.__state.value.opacity === 1 ? 200 : 2000
    return { type: 'timing', duration  } 
})

return <MotiView state={animation} transition={transition} />

Here's a code sample: https://snack.expo.dev/@beatgig/trusting-scones?platform=web

[nandorojo]

Alternatively, you could do this:

import { MotiTransition, MotiView } from 'moti'
import { useSharedValue } from 'react-native-reanimated'

// ...

const transition = useSharedValue<MotiTransition>({
  type: 'timing',  duration: 200
})

const onPress = () => {
  transition.value = { type: 'timing', duration: 2000 }
  animation.animateTo({ opacity: 1 })
}

return <MotiView state={animation} transition={transition} />

Note here that shared values and derived values are valid options for the transition prop, as shown on the new Moti docs.

[nandorojo]

I could also consider adding transition directly into a variant... I'll think about it

[nandorojo]

Opened a PR at #233