The second interaction we will be looking at is commonly seen on most apps and websites where you are going through a list or a catalogue of products and when you click on one of those, you are taken into a new page with more details about the product. This interaction will create the left swipe. On the S1 artboard, click on the layer L2 and add a similar interaction using the same settings but, in this case, set the Destination to S3. Test this interaction by clicking on the play button on the top-right side of the tool. You can also add easing based on your preferences. Now on the S1 artboard, click on the layer L1 and add an interaction on the right side of the tool by setting Trigger to Drag, Action to Auto-Animate and Destination to Artboard S2. You can do this by going into the Prototype mode on the top-left side of the tool. Now that the artboards are completely set up, the next step is to animate them.
S3 – Arrange the L2 card so the left edge of L2 is aligned with the other cards. S2 – Arrange the L1 card so the right edge of L1 is aligned with the other cards. S1 – Change the Opacity of A1 and A2 to 0% and arrange L1, L2 so they are centre-aligned. In order to do that we need to make some changes for each of these artboards. We will be using S2 for delete swipe and S3 for add to queue swipe. Let’s duplicate the entire artboard twice, into two states – S2 and S3. Now, the first artboard (S1) is complete. Add it to the left of the group C2 and create a combined layer named L2. Create a group A2 with icon, text and green background. Create the second cardįor the second card – C2 – we are going to add an add to queue right-swipe action in a similar fashion. Now combine C1 and A1 into a layer L – so that A1 is on the right side of C1. Group all these items into a layer called A1. So, let’s create a small square with a red background, add some Delete text and an icon as shown in the screenshot below. You can edit them based on your taste.įor the first card – C1 – we are going to add a left swipe for delete action. Duplicate it until five of the similar cards are made. Now group all these elements into a single layer. You can add basic details such as the name of the song, name of the artist, length of the song and the rating. Let’s get started and create the first card. When a card is swiped right, it should add the song to the queue. Each song is an individual card and essentially when each card is swiped left, it should remove the song from the playlist. For the first artboard, we’re going to create a playlist screen with five songs in it. For this example, let’s look at a music playlist. Swipe interactions are one of the most commonly used micro-interactions on mobile apps.
0 kommentar(er)
