Patrick McDaniel
 · Costco Enthusiast

Creating Expandable Cards

Step-by-step Instructions:

  1. Draw a box around your content

  2. Add a “default” state with a transition to the box

  3. Select “Add New State” and apply another transition

  4. With the new state selected, change the size & color of the box

  5. Hide the text that you want to reveal when the box expands

  6. Draw a hotspot over the card

  7. Apply a “Show” on “Hover” interaction to the hotspot

  8. Select your hidden text as the target

  9. Apply another “Hover” interaction, this time “Change target state” with the box shape as the target

  10. Select your new “Target State” and click “Save Interaction

  11. Apply “On View” & “On Hide” animations as desired to fine tune the design   

2