Switch that is checked by default causes thumb to move in wrong direction if prop "animation" is set

[TheUnderScorer]

Current Behavior

Hi!

In my app, I have a <Switch /> that is checked by default, like this:

<Switch defaultChecked>
    <Switch.Thumb animation="250ms" />
 </Switch>

If the prop animation is set on the Thumb, when Switch is toggled it looks like this:

Screen.Recording.2024-04-04.at.13.33.56.mov

However, it works as expected when I remove the animation prop.

Screen.Recording.2024-04-04.at.13.36.59.mov

The 250ms animation looks like this:

{
'250ms': {
    type: 'timing',
    duration: 250,
  },
}

I use animations from @tamagui/animations-moti.

Expected Behavior

The Thumb should move to the correct position when it's checked state changes if the Switch is checked by default, no matter if the animation prop is set or not.

Tamagui Version

1.94.3

Platform (Web, iOS, Android)

iOS

Reproduction

1. Configure your app to use @tamagui/animations-moti as an animations driver, and set up the 250ms animation from above.
2. Render the Switch:

<Switch defaultChecked>
    <Switch.Thumb animation="250ms" />
 </Switch>

3. Notice that Thumb moves in wrong direction when switching

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 3.25 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - ~/.nvm/versions/node/v21.6.2/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v21.6.2/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v21.6.2/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.105
    Safari: 17.4.1

[ehxxn]

this issue seems to be fixed in latest version of Tamagui, let me know if it still happens

[TheUnderScorer]

Hey @TheEhsanSarshar.

Unfortunately, I'm still having the same issue in 1.95.1 😢

[ps-george]

Also having the same issue in 1.95.1