Figma Prototyping: Designing Pull to refresh micro-interaction

[@LilyBrand12345]

I just tried it and it looks great! Thanks for the tutorial :)

[@AkashYadavUX]

thank you Lily 😊

[@jamil_mikael]

thanks so much i now have an ace up my design sleeve !!

[@AkashYadavUX]

Glad I could help!

[@eloketobe]

Thanks for the video, it just gave me a great idea for something I'm building

[@jatinraj4974]

Awesome work sir😊😊😅

[@AkashYadavUX]

thank you 🥳

[@bishtmahesh1]

Hey Akash u have some really interesting tutorials

[@AkashYadavUX]

Glad you liked them 😇

[@aashishjain9069]

Hey sir, how can we change the image of chlid component manually ?

[@M8RTAL_]

Hey akash. there is one problem with this. If you scroll to the bottom as well, it will also refresh. I want it to only refresh if i scroll to the top. Is this possible? I'm new to figma so sorry!

[@kartikeyshandilya7253]

What if we just reduce the opacity of Uber card in the 2nd screen instead of reducing the size of the frame & then increasing the opacity of that card to 100 in the 3rd screen? Will the effect be same Akash?

[@AkashYadavUX]

Hey Kartikey No the effect will not be same. With the size change, it gives a notion that the card is being created where as with opacity change it will just "Appear". The size change is more dramatic, that's why i chose that interaction.✌️😇

[@kartikeyshandilya7253]

Hi Akash. I am talking about the frame in which you grouped all the cards. You reduced its size to clip the uber card out. So what if we keep the frame size intact & then reduce the opacity of uber card?

[@AkashYadavUX]

Got it. So I reduced the frame size, because I wanted the scroll of all the feed cards to be perfect all the time. You will get the same result in animation with the method you proposed, only issue is the scroll of cards will have gaps on top and bottom as it will be accommodating the uber card even when it's not visible. But other than that, same result can be achieved✌️

[@吴翠翠-i1e]

hi，Akash. I have a new problem that my gif animation will play very slow when put in figma, do you know how to solve this problem😊

[@afifhusain6615]

i cant drag the item to the bottom like you do sir, it always drag to left or right , please

[@AkashYadavUX]

Hey Afif! To enable the drag in one vertical direction, make sure the entire group in screen 2 is move down vertically . There should be no horizontal movement from screen1 to screen2

[@diewldy4143]

hey..can i get link this file figma?^^

[@AkashYadavUX]

Hey hi.. The Figma files for all the interaction shown is on my Figma community page www.figma.com/community/file/932223204866138211