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.
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