What is this effect called and how to create this in Figma?

I have this effect in mind and do not know what this is called or how to create this in Figma when my Frame is navigated to. Kindly provide relevant information/links.

Timeline 1

Not sure what this called but here’s a quick example of how to achieve something similar in Figma: https://www.figma.com/file/naauM42rZXwCpOAbqCxUzU/Animation?type=design&node-id=0%3A1&mode=design&t=FEq8k7NZnTyrUWb6-1

This could definitely be refined and probably done use some different methods but overall it’s more or less possible in Figma.

1 Like

Thanks Josh!
I saw the prototype you linked, but if you observe closely, next element does not appear after previous animation is finished. The next element animation starts when the 1st is almost halfway and so on.

The purpose is to make it look less robotic.

Hi @Himanshu
From what Josh made you can easily delay each rectangle so they don’t animate one after the other
Here is the proto : Figma Proto : Delayed card animation

Basically creat a component for the card/rectangle. We need two states for it : animation:begin and animation:end

  • animation:begin is a rectangle scale down with an opacity of 0
  • animation:end is whatever you want to achieve (so opacity 1 et scaled up to desired size)

then you can add an iteraction from begin to end triggered by an after delay with a smart animation transition.

Once the component is done, juste duplicate it on your prototype and increase the “after delay” duration of each card. (in my exemple the base after delay is 100ms and for each card I added 200more than the previous one (resulting in 100, 300, 500, and 700ms).
Also be sure that the Smart animation duration is longer than the delay between two cards appearing (I used 600 to showcase)

Hope it helped

Thanks. Creating different components does work. Thanks a lot !