CODEWITHSUNDEEP
javascriptreactjsanimationpopmotionreact-pose
Colin Ricardo
Colin Ricardo

Reputation: 17269

react-pose animation flashing on mount

I have the following code, which should render a simple fade in animation for the Container component after 3 seconds. However, the component is flashing fully visible before fading in. My question is: why is this happening, and how can I stop it from happening?

gif

import React, { useState, useEffect } from "react";
import { render } from "react-dom";
import posed, { PoseGroup } from "react-pose";
import styled from "styled-components";

const sequence = b =>
  b.every(
    (a, i) => !(a.call ? a() : setTimeout(() => sequence(b.slice(++i)), a))
  );

const usePose = (initial, poses = {}) => {
  const [pose, setPose] = useState(initial);
  return { pose, setPose, poses };
};

const useAnimation = () => {
  const { pose, setPose } = usePose(`hidden`, [`hidden`, `normal`]);

  useEffect(() => {
    sequence([3000, () => setPose(`normal`)]);
  }, []);

  return {
    pose
  };
};

const Container = styled(
  posed.div({
    hidden: {
      opacity: 0
    },
    normal: { opacity: 1 }
  })
)({
  color: "red"
});

const App = () => {
  const { pose } = useAnimation();

  return (
    <PoseGroup animateOnMount>
      <Container key={0} pose={pose}>
        <h1>hello world</h1>
      </Container>
    </PoseGroup>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Edit 435opr99l0

Upvotes: 1

Views: 427

Answers (1)

Colin Ricardo
Colin Ricardo

Reputation: 17269

Issue solved by: 

const Container = styled(
  posed.div({
    hidden: {
      opacity: 0
    },
    normal: { opacity: 1 }
  })
)({
  color: "red"
  opacity: 0, // Add this to stop flash. 
});

Upvotes: 0

Related Questions