Some bug reports

[Stevemoretz]

I tried to create a snack but It gave errors about reanimated 2 when I added moti.

import {AnimatePresence} from "moti";
import React, {useState} from "react";
import {Button, Text, TouchableOpacity} from "react-native";

const test = () => {
  const [presence, toggle] = React.useReducer((s) => !s, true)
  return (
         <>
            <AnimatePresence>
                {presence && (
                    <MotiView
                        from={{
                            translateY: -50,
                            rotateX: "-90deg",
                        }}
                        animate={{
                            translateY: 0,
                            rotateX: "0deg",
                        }}
                        exit={{
                            rotateX: "90deg",
                            translateY: -50,
                        }}
                        transition={{
                            type: "timing",
                            duration: 2000,
                        }}
                    >
                        <Text style={{fontSize: 50, color: "red"}}>213</Text>
                    </MotiView>
                )}
            </AnimatePresence> 
            <Button title="press-me" onPress={toggle} />
          </>
)
}
export default test;

using these :

    "moti": "^0.10.1-alpha.1",
    "react-native-reanimated": "~2.1.0",
...
expo sdk 41

If I remove translate here the rotate works and if I remove rotate the translate works, but they don't both work at the same time and I get a glitch effect instead.

[Stevemoretz]

Found some clue :

                from={{
                    translateY: -50,
                    rotateX: "-90deg",
                }}
                animate={{
                    translateY: 0,
                    rotateX: "0deg",
                }}
                exit={{
                    translateY: -50,
                    rotateX: "90deg",
                }}

Using the keys in order (first translate then rotate) in from and animate and exit, would fix the exit animation.

The enter animation is however where glitch is still happening.

[Stevemoretz]

Here's how the glitch on enter animation would be fixed :

                animate={{
                    translateY: [-50, 0],
                    rotateX: ["-90deg", "0deg"],
                }}

[Stevemoretz]

If you change the order of keys you get different results which is expected,But still I think we don't have a good control over this, I suggested some changes here which would fix these problems and more problems all at once :

#24 (comment)

[Stevemoretz]

Here's how the glitch on enter animation would be fixed :

                animate={{
                    translateY: [-50, 0],
                    rotateX: ["-90deg", "0deg"],
                }}

Sequence on exit:

                exit={{
                    translateY: [0, 50],
                    rotateX: ["0deg", "-90deg"],
                }}

This has type errors also doesn't work at all.

[nandorojo]

You can't use sequences on exit at the moment

[Stevemoretz]

You can't use sequences on exit at the moment

I wanted to use that as a workaround to fix something else, that something else is the main problem not sequence on exit.

[nandorojo]

Can you confirm this does not happen with Reanimated?

[Stevemoretz]

It's related to your library not reanimated.
Its about enter and exit animations and the way you have implemented it.
You shouldn't have closed this.
Later you will face these bugs yourself.

[nandorojo]

Can you reproduce the enter effect you want with Reanimated to show that that's not the issue?

[nandorojo]

I'll re-open, but I'd appreciate this being more actionable. It's unclear to me what the problem is.

[nandorojo]

Closing for #76

[power-f-GOD]

I tried to create a snack but It gave errors about reanimated 2 when I added moti.

import {AnimatePresence} from "moti";
import React, {useState} from "react";
import {Button, Text, TouchableOpacity} from "react-native";

const test = () => {
  const [presence, toggle] = React.useReducer((s) => !s, true)
  return (
         <>
            <AnimatePresence>
                {presence && (
                    <MotiView
                        from={{
                            translateY: -50,
                            rotateX: "-90deg",
                        }}
                        animate={{
                            translateY: 0,
                            rotateX: "0deg",
                        }}
                        exit={{
                            rotateX: "90deg",
                            translateY: -50,
                        }}
                        transition={{
                            type: "timing",
                            duration: 2000,
                        }}
                    >
                        <Text style={{fontSize: 50, color: "red"}}>213</Text>
                    </MotiView>
                )}
            </AnimatePresence> 
            <Button title="press-me" onPress={toggle} />
          </>
)
}
export default test;

using these :

    "moti": "^0.10.1-alpha.1",
    "react-native-reanimated": "~2.1.0",
...
expo sdk 41

If I remove translate here the rotate works and if I remove rotate the translate works, but they don't both work at the same time and I get a glitch effect instead.

Faced the same issue! 💔

[nandorojo]

I'll track this at #76, thanks for letting me know

[nandorojo]

Fixed in 0.12.0

yarn add moti

[fukemy]

hi @nandorojo i got exactly same problem, the animation so bad to me, can u help:

<MotiView
                    style={{
                        flex: 1,
                        width: '100%'
                    }}
                    exit={{
                        translateX: localViewPositionRef.current.x,
                        translateY: localViewPositionRef.current.y,
                        width: 120,
                        height: 160,
                        opacity: 0,
                    }}
                    from={{
                        translateX: localViewPositionRef.current.x,
                        translateY: localViewPositionRef.current.y,
                        width: 120,
                        height: 160,
                        opacity: 0,
                    }}
                    animate={{
                        translateX: 0,
                        translateY: 0,
                        width: width,
                        height: height,
                        opacity: 1,
                    }}
                    transition={{
                        type: 'timing',
                        duration: 1000,
                    }}>

IMG_0440.MOV

I want to make scale + TranslateX/Y like Shared Element Transition