question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Opacity transition on animated state on react-native-web

See original GitHub issue

I am running into an issue with opacity on react-native-web, starting with this example: https://github.com/expo/examples/tree/master/with-moti

…and then swapping the code from the animate presence on the docs example page.

import React, { useReducer } from "react";
import { StyleSheet, Pressable } from "react-native";

import { MotiView, AnimatePresence } from "moti";

function Shape() {
  return (
    <MotiView
      from={{
        opacity: 0.001,
        scale: 0.001,
      }}
      animate={{
        opacity: 1,
        scale: 1,
      }}
      exit={{
        opacity: 0.002,
        scale: 0.002,
      }}
      style={styles.shape}
    />
  );
}

export default function Presence() {
  const [visible, toggle] = useReducer((s) => !s, true);

  return (
    <Pressable onPress={toggle} style={styles.container}>
      <AnimatePresence>{visible && <Shape />}</AnimatePresence>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  shape: {
    justifyContent: "center",
    height: 250,
    width: 250,
    borderRadius: 25,
    marginRight: 10,
    backgroundColor: "white",
  },
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    backgroundColor: "#9c1aff",
  },
});

I altered the from / exit to see what value it was landing on when animated in view should be opacity & scale = 1, but it looks like the opacity state is being set back to the 0.001 value in the from state.

See video of my encounter on react-native-web: https://www.loom.com/share/56d4029cbbb64bcaab21dcdfccd095c5

I also tried the useAnimationState fix with no luck there either. The above code works fine on iOS with expo go.

New issue request reference comment: https://github.com/nandorojo/moti/issues/85#issuecomment-907274095

_Originally posted by @bennettfrazier in https://github.com/nandorojo/moti/issues/85#issuecomment-907272999_

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
nandorojocommented, Aug 27, 2021

Yeah see the issue I linked to. RNW reverted it back, which is why the force install is needed. Or you could patch the change, it’s a one liner.

1reaction
nandorojocommented, Aug 27, 2021

I believe this is the known issue documented here: https://moti.fyi/web#spring-animations

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Animations - React Native
Value called fadeAnim is initialized as part of state . The opacity property on the View is mapped to this animated value.
Read more >
React Native animation transition opacity from 0 to 1 does not ...
Just change the opacity from 0 to 1 probably would not make my app looks like the example I found on codepen, but...
Read more >
How Moti Animations work - evening kid - Medium
So now that you know about variant-based, static animation states, we can look at dynamic animations in Moti. It basically works like a...
Read more >
Intercepting component state to ensure smooth animated ...
We need to ensure that the opacity change happens inside the next requestAnimationFrame() call, so we can just add a delay of e.g....
Read more >
Animating appearance & disappearance in React Native
Fade implementation · when the visible prop becomes true , set the visible in the state to true immediately. · when the visible...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found