Skip to main content
Solved

Glitchy Card Carousel Animation

Michael_Christmas

I’m having a hard time getting this interaction to work. When the card at the back of the cue comes to the front, it expands in size all at once and looks glitchy, instead of a smooth and subtle transition which is what I usually get with smart animate. Not sure if I need to build the cards differently or what but any help would be greatly appreciated.
image

Best answer by Corey_Korhan

Hi, it’s really hard to tell from the image but I guess the components are within that image are separated layers. When you’re using smart animate, Figma tries to animate every single layer within that box. What you can do is

  1. Convert those cards components and animate it’s instances
  2. Check if there’s any unnecessary animation property left within the layers. Even a pixel difference is converted as a smart animation property.
  3. Check the layer namings. That’s a common mistake. If the layer names won’t match between frames, the only thing smart animate can do is to dissolve in/out.
  4. Interactive Components! ▶ Sign up for the Interactive Components beta → Make the whole cards as component variables and do an instance animations. It’s a bit of work at the beginning but ends up saving a loooot of time later on.

Let me know if you still have problems

View original

2 replies

Corey_Korhan

Hi, it’s really hard to tell from the image but I guess the components are within that image are separated layers. When you’re using smart animate, Figma tries to animate every single layer within that box. What you can do is

  1. Convert those cards components and animate it’s instances
  2. Check if there’s any unnecessary animation property left within the layers. Even a pixel difference is converted as a smart animation property.
  3. Check the layer namings. That’s a common mistake. If the layer names won’t match between frames, the only thing smart animate can do is to dissolve in/out.
  4. Interactive Components! ▶ Sign up for the Interactive Components beta → Make the whole cards as component variables and do an instance animations. It’s a bit of work at the beginning but ends up saving a loooot of time later on.

Let me know if you still have problems

Michael_Christmas

Thank you! Seems like I might be able to accomplish what I’m going for by using variants within interactive components.

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings