Skip to content

Commit

Permalink
docs: web springs
Browse files Browse the repository at this point in the history
  • Loading branch information
nandorojo committed Mar 19, 2021
1 parent 4a9965b commit f6060e4
Showing 1 changed file with 17 additions and 3 deletions.
20 changes: 17 additions & 3 deletions docs/docs/web.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,31 @@ Your app will now run with Expo Web!

### Spring animations

In my experience, reanimated 2's spring animations are glitchy on web. I recommend using `timing` animations for now.
By default, `moti` uses `type: 'spring'` for animations.

However, Reanimated 2's spring animations are currently glitchy on web.

If you want to use springs, I recommend setting `overshootClamping: false`. This seems to solve it on web:

```tsx
<MotiView transition={{ overshootClamping: false }} />
```

Thanks to [pranshuchittora](https://github.com/pranshuchittora) for discovering this workaround.

See [Reanimated issue #1804](https://github.com/software-mansion/react-native-reanimated/issues?q=is%3Aissue+web+is%3Aclosed+) for more info on this problem. It should be solved once `react-native-web` merges [#1939](https://github.com/necolas/react-native-web/pull/1939). Once that's merged, you'll need to install the new version of RNW (`0.15.x`, presumably.)

Another solution is to use `timing` transitions instead of the default `spring`.

You can configure your animation settings using the `transition` prop of any Moti component.

```tsx
import React from 'react'
import { View } from 'moti'
import { View as MotiView } from 'moti'

export default function Timing() {
return (
<View
<MotiView
from={{
scale: 0.8,
opacity: 0,
Expand Down

2 comments on commit f6060e4

@vercel
Copy link

@vercel vercel bot commented on f6060e4 Mar 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on f6060e4 Mar 20, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

moti-expo – ./examples/with-expo

moti-expo-git-master-fernandorojo.vercel.app
moti-expo-fernandorojo.vercel.app
moti-expo.vercel.app

Please sign in to comment.