CSS Animation Help in NextJS
Unanswered
Alaska pollock posted this in #help-forum
Alaska pollockOP
Hi there I am trying to create an animation but failing by some changes can somebody help me out here as i am weak in css animation
here is the link of the video demo of the animation i created
https://utfs.io/f/279dba71-4011-4096-9a9f-3d2e69253b6e-ihxjt0.mp4
here is the problem description with my code
i am working on an animation and i need help with the css of it
let me add the ss video for the context
if anyone's free can you please lend a hand here
Here is the problem
See in the animation there are three cards but initally one card which is fine because as soon as the first card will reach its position the next card gets displayed then the last one
but scene is this initialy cycle which the single card is covering before stoping at the position where it needs to stop and scale up
i do not wanted this inital revolution to take place how can i remove it because it is making bad UX
here is the component code and css
can some body help ??
here is the link of the video demo of the animation i created
https://utfs.io/f/279dba71-4011-4096-9a9f-3d2e69253b6e-ihxjt0.mp4
here is the problem description with my code
i am working on an animation and i need help with the css of it
let me add the ss video for the context
if anyone's free can you please lend a hand here
Here is the problem
See in the animation there are three cards but initally one card which is fine because as soon as the first card will reach its position the next card gets displayed then the last one
but scene is this initialy cycle which the single card is covering before stoping at the position where it needs to stop and scale up
i do not wanted this inital revolution to take place how can i remove it because it is making bad UX
here is the component code and css
can some body help ??
5 Replies
Japanese jack mackerel
The issue lies in the @keyframes you're using, specifically with the scale property in each keyframe. The scaling effect is causing the cards to resize during the animation, which is creating an unwanted visual effect. To avoid the cards scaling to their original size (or any size), you should either remove the scale property or keep it consistent throughout the animation.
u can try removing the scale property like this :
@keyframes scale {
0% {
transform: rotate(0deg) translateY(150px) rotate(0deg);
}
25% {
transform: rotate(90deg) translateY(150px) rotate(-90deg);
}
50% {
transform: rotate(180deg) translateY(150px) rotate(-180deg);
}
75% {
transform: rotate(270deg) translateY(150px) rotate(-270deg);
}
100% {
transform: rotate(360deg) translateY(150px) rotate(-360deg);
}
}Japanese jack mackerel
@Alaska pollock
Alaska pollockOP
hi @Japanese jack mackerel thanks for the insight really appreciated, but scene isI wanted them to scale as you can see in the video(refer the link) when all the cards stops those sizes at which they were stopping is what type of design i was asked to replicate
See let me clarify the problem once i think i was unable to
The problem lies in the initial revolution done by that single card alone that is after the first cycle it takes then only the type of animation that i wanted to render takes place how can i not make that first revolution and still be able to do what the card is doing in the second cycle
Like inshort the first card should start from the bottom point on the circumference move to left get scaled up then should stop, after which the transition occurs and second card gets displayed it moves to location set where it stops and gets scaled down due to that is the intended size it should take after which the third card gets displayed using the transition it moves on the circumference of the circle till it reaches the desired position and accordingly it takes the size
See let me clarify the problem once i think i was unable to
The problem lies in the initial revolution done by that single card alone that is after the first cycle it takes then only the type of animation that i wanted to render takes place how can i not make that first revolution and still be able to do what the card is doing in the second cycle
Like inshort the first card should start from the bottom point on the circumference move to left get scaled up then should stop, after which the transition occurs and second card gets displayed it moves to location set where it stops and gets scaled down due to that is the intended size it should take after which the third card gets displayed using the transition it moves on the circumference of the circle till it reaches the desired position and accordingly it takes the size