Infinite Loop Card Swipe Animation in Figma with Interactive Component | Smart Animate

[Music] hey everyone welcome back to another tutorial in this video i'm going to be showing you how we can create an infinite card swipe animation like this in figma the interesting thing here is that i've used only one frame instead of creating multiple frames for all possible combinations of interactions let me show you how for that i'll be using these four cards which i've already created using figma you can grab a copy of the file in the description below to follow along let's start with creating multiple instances of each card what i mean by multiple instances is here the first card is in original size the second card is smaller and its opacity is set to 60 and the third card is much smaller than the other two and its opacity is set to 20. so we are going to create each of this instance of all four cards let's start with card one i'm going to add a name on all the cards based on their instance for better understanding for example i'll add lg to the first card name the mv for second and sm for the third now adjust the style for each card based on their instances also we need a fourth instance that will be hidden so i'll name it hidden or hd and set its opacity to zero now i'm going to repeat the same process for the rest three cards this process of creating multiple instances and giving them a proper name is not really an important part but it will help us to reduce a lot of confusion that may occur in our next step so here i have created all the instances for the four cards now select all of them then open the component menu and click create component set let's give a proper name for each property now pick a copy of each car from the component set by holding the alt key now duplicate the first three cons and place them behind the fourth card select all and click align horizontal centers change the property of the cards based on their position the first card size property is lg set the second card's property to md and third to sm select all the remaining cards and set the size property to hd now place all the hidden cards behind the third card and arrange the first three cards properly like this select all cards right click and click frame selection set this frames width the same as the mobile frame width we have used in my case is 375 pixels give a name to the frame duplicate the frame here change the rotation of the first card and move it to the right don't drag and move the card as you leave the frame section when the first card is swiped out of the frame the second card will come to its place like this so select the first card and change its property to lg the same goes with the third and the fourth cards change their properties according to their positions select all and align them to the center now duplicate this frame and repeat the same process we did this with the previous one repeat this until you see the red card to the front again small tip to make the card swipe to the right just move the card to the right side finally you will see five frames in total if you're working with four cards now select all the frames and make them a component set now click on the prototype tab in the right sidebar and drag a noodle from first card in the first frame to second frame like this go to the interaction details panel change the trigger type to on drag and change its animation to smart animate apply the same steps to the remaining frames now select the final frame and drag a doodle to the first frame here and change the trigger type to after delay set the time to 1 millisecond and animation to instant that's it let's check the outcome duplicate any frame from the component set and place it inside a removable frame now select the frame and click the play button here we go hope you all enjoyed this video be sure to subscribe for more content if you have any queries let me know in the comments below follow me on instagram and links to my social accounts are in the description below see you next time until then bye [Music]

Channel: Stark Trent

Views: 20,973

Keywords: figmatutorial, figmadesign, interactivecomponents, uidesign, uiux, figma, smartanimate, loopanimation

Id: kNFoNm2Xf2w

Length: 7min 11sec (431 seconds)

Published: Tue Mar 22 2022