0

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?

John Smith
  • 465
  • 4
  • 15
  • 38

1 Answers1

1

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/)

Dmitro Borchuk
  • 86
  • 2
  • 1
    Hi Dmitro Borchuk, thanks for this answer. I am sure it is correct. Do you happen to know why it does not show up when the `isloading` is set via `useEffect` using `useState`; But I am fetching data from third-party API, I tried `setInterval` but then it causes other issues with Render. – John Smith Jun 05 '20 at 17:22
  • 1
    Hey, could you please provide me with whole component code, so I can see what wrong? – Dmitro Borchuk Jun 05 '20 at 20:05