Animation API examples

[afkcodes]

Hey Hi Played around the animations changes that has been added, i am not good with animations so, would you please help me , or if you can update the medly example to have different sorts of route animations

Also if you can help me suggesting the animation config for this ?

https://whatpwacando.today/view-transitions

Please check the scale one in this on mobile. Thank you for all the hardwork,

[grahammendick]

Hey, here's what the animations look like for the medley sample

<NavigationStack>
  <Scene stateKey="north"
    crumbStyle={{type: 'translate', startY: '-30%'}}
    unmountStyle={{type: 'translate', startY: '-100%'}}>
    <Direction direction="north" color="blue" />
  </Scene>
  <Scene stateKey="east"
    crumbStyle={{type: 'translate', startX: '30%'}}
    unmountStyle={{type: 'translate', startX: '100%'}}>
    <Direction direction="east" color="red" />
  </Scene>
  <Scene stateKey="south"
    crumbStyle={{type: 'translate', startY: '30%'}}
    unmountStyle={{type: 'translate', startY: '100%'}}>
    <Direction direction="south" color="green" />
  </Scene>
  <Scene stateKey="west"
    crumbStyle={{type: 'translate', startX: '-30%'}}
    unmountStyle={{type: 'translate', startX: '-100%'}}>
    <Direction direction="west" color="black" />
  </Scene>
</NavigationStack>

I'm not sure what you're after with that pwa link you sent. Do you want animations for react native or react native web?

[afkcodes]

Hey, @grahammendick Sorry probably i was not able to make the question clear. I was asking about, if we can get the similar scale transition as that of the pwa with react native. not the web.

[grahammendick]

Yea, here's something similar to the scale transition

<NavigationStack
  crumbStyle={{type: 'scale', startX: 1.2, startY: 1.2}}
  unmountStyle={{type: 'scale', startX: 0.8, startY: 0.8}}>

[afkcodes]

Thanks will try this out. you are awsome

[grahammendick]

Thanks. Let me know if you have any trouble