reactjspose

Circle animation not displaying

From: https://popmotion.io/pose/

I grabbed this code,

const Circle = posed.div({
  attention: {
    scale: 1.3,
    transition: {
      type: 'spring',
      stiffness: 200,
      damping: 0
    }
  }
})

And I am doing: 

<Circle />

But, nothing happens. Am I missing something?

Solution

  • you need to create two states for the posed.div:

    const Circle = posed.div({
  attention: {
    scale: 1.3,
    transition: {
      type: "spring",
      stiffness: 200,
      damping: 0
    }
  },
  rest: {
    scale: 1
  }
});

    then you need to pass state to your Circle and some styles to make this component red and circle (popmotion.io doesn't do it for you)

    <Circle
  className="circle"
  pose={isLoading ? "attention" : "rest"}
/>

    here is the working solution https://codesandbox.io/s/pose-get-started-zv637?file=/src/index.js

    But I am not sure that it is the best way to make loaders because popmotion.io is a tool to animate transitions between states. I can propose you to use pure css loader (https://loading.io/css/)