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.
Solved
What is this effect called and how to create this in Figma?
Best answer by Haroll
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
This topic has been closed for replies.
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 person likes this
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 !
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.