I'm trying to make an animation for when the user closes a modal, but for some reason it doesn't work when the modal is closed. It should close the modal from bottom to top, but the animation doesn't run. Can anyone shed some light on this?
here is the codesandbox
In order for AnimatePresence to work properly, you need to assign a unique key attribute / prop to AnimatePresence's direct child element. This is because AnimatePresence uses that key to keep track of when the element is removed from React tree.
See an example here.
After a few hours testing animation settings using polygon instead of inset, I got exactly the result I wanted. Below is the configuration I used for the animation:
export const variants = {
initial: {
clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)',
transition: { duration: 0.4 },
},
animate: {
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
transition: { duration: 0.4, staggerChildren: 0.1 },
},
exit: {
clipPath: 'polygon(0 100%, 100% 100%, 100% 100%, 0 100%)',
transition: { duration: 0.4 },
},
};
Related
I am creating a react application and using framer motion for animation, I am trying to circulate a box around a central axis so it the spinning motion may look 3d. I am defining key frames so for example if I want to move the box on axis I use
{ x: [0, -100, 0, 100, 0] }
The problem is that circular motion needs to be smooth and consistent, but framer motion slows down animation at every keyframe, which doesn't create the effect I want.
So is there any way I can disable this slow down ?
In the animate prop add a transition: {ease: "linear"}
It will look like this
<motion.div
animate={{
x: [0, -100, 0, 100, 0],
transition: {
ease: "linear",
}
}}
></motion.div>
I am trying to animate an animation in framer motion using Chakra-ui and Gatsby whereby there is rotation and movement and opacity change.
At the moment the animation works as I intend on the movement on the x axis and rotation using type:spring however the 'bounce effect' also affects the opacity.
I have tried to explicitly define the type:tween for the opacity property, but this has no effect with the opacity of the object still 'bouncing' too. Here is my code:
const Rocketship = ({ top, right, bottom, left, opacity }) => {
const RocketAnim = motion(Box)
const transition = {
default: {
type: 'spring',
damping: 5,
},
opacity: { type: 'tween' },
}
return (
<RocketAnim
layoutId="rocketship"
initial={{ rotate: 25, x: -100, opacity: 0 }}
animate={{ rotate: 45, x: 0, opacity }}
whileHover={{ width: '170px', cursor: 'pointer' }}
transition={transition}
pos="fixed"
width={150}
top={top}
right={right}
bottom={bottom}
left={left}
...
I would be grateful for any advice
Don't have a complete answer because there isn't enough context, but
Your RocketAnim should be defined outside of the component since you don't need it recreated ever render
You don't have to make it a tween, I would keep it as a spring (the default value) and just set bounce to 0
opacity: { bounce: 0}
If you keep it as a tween, I would try adding a duration to trouble shoot the bouncing.
I'm trying to make some element blink in css, under React/material-ui, using withStyle.
The syntax from this post looks nice:
https://stackoverflow.com/a/48320520/9316077
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
I simply tried the following:
'#keyframes blinker': {
'50%': {
opacity: 0,
},
},
'& .blink': {
animation: '$blinker 1s step-start infinite',
},
Adding the $ before blinkerbased on this issue:
https://github.com/mui-org/material-ui/issues/13793
But this crashes my webpage. Any idea? Thanks!
Keyframes name is generated since JSS core v10 so depending on which version you are using you need to use $ when you are referencing a scoped name or without when name/id is global.
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?
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/)
I have started playing around with react-spring and I am loving the concept but I am struggling to work out how to build the animation that I want.
I would like to make a div move to the right, then back to start, then to the right, but not as far, back to start, to the right, but not as far again and finally back to start. Just like a spring, that is pulled and when released goes boingoingoing back to it's resting place.
I can see from the documentation how to adjust the feel of the spring and how to trigger the animation, but I have never made an animation before so knowing which properties to change and how to make it loop properly are what I am looking for help on.
Edit: I have this animation so far, and it works, but it feels very disjointed.
const shake = useSpring({
from: { "margin-left": 0 },
to: [
{ "margin-left": 30 },
{ "margin-left": 0 },
{ "margin-left": 20 },
{ "margin-left": 0 },
{ "margin-left": 10 },
{ "margin-left": 0 }
],
config: {
mass: 1,
tension: 500,
friction: 10
}
});
Currently it is clearly three movements, can I decrease the delay between the movements so that it looks like one movement?
Is margin left the best CSS property to use?
UPDATE START
I just came across a simple solution for this problem. It I way better than the one I tried to achieve with configuration. It uses interpolation with range. It is using transform now but can easily adopted to margin.
export default function App() {
const { x } = useSpring({
from: { x: 0 },
to: { x: 1 }
});
return (
<div className="App">
<animated.div
style={{
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [180, 220, 180, 220, 180, 220, 180, 200]
})
.interpolate(x => `translate3d(${x}px, 0px, 0px)`)
}}
>
Shake
</animated.div>
</div>
);
}
https://codesandbox.io/s/awesome-framework-go5oh?file=/src/App.js:103-609
UPDATE END*
You can achieve the bouncy effect. There are 3 variable controlling the spring based animation:
mass
friction
tension
You can play with the pink square here: https://www.react-spring.io/docs/hooks/api
I recommend low mass and friction and high tension. You can set these variable in every animation type. For example:
useSpring({ ..., config: {mass: 1, tension: 500, friction: 10} });