![]() ![]() Therefore we will add a second Intermediate State for the reverse order animation.Īdd a new arrow from the Ending State to the Second Intermediate State. Similar to the normal order animation, we want to trigger the animation when users click on the Ending State, and of course we want the detail description to hide away first before we enlarge the avatar, name and job title. Now the animation for the normal order (Starting to Ending State) is finished, let’s create the animation for the reverse order (Ending to Starting State). Starting State to Ending State The Reverse Animation The duration defines how long it will take to change from the Starting State to the Intermediate State. The animation will start when users click on the Starting State of the business card, so we set the Trigger to “Tap”. Trigger defies how the animation will start. Interaction Settings from Starting State to Intermediate State Adobe XD Prototype Tab Link Starting State and Intermediate Stateįrom the panel on the right, configure the following settings: Drag the arrow to connect with the Intermediate State artboard. When you select an artboard, an arrow will appear. On Adobe XD, switch to the Prototype tab and select the Starting State artboard. Notice how we place the detail description a little bit outside of the business card and make it invisible by setting the opacity to zero. Since we already have Starting State and Ending State, we just need to create the intermediate state. Detail description becomes visible and move up to the ending position.Should prepare detail description at the bottom of the business card, but be invisible.User avatar, name, and job title shrink in size and move to the top left corner.Initial state of user avatar, name, and job title.States preparationsįor the animation to work, we need to prepare the following states: Then for animation two, we will animate from the intermediate state to the ending state. The intermediate state allows us to create a stop point at the end of animation one. Looking through the break downs immediately we learned that there should be an intermediate state between the starting and the ending state. ![]() After a brief delay, the detail description should slide in from the bottom.The user avatar, name, and job title should shrink in size and move to the top left corner.If we break down the animation step by step, we need to achieve the following: Business Card Ending State Animations Break Down ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |