[Docs] Add tips and trick: How to animate edges in Meshery Designs

[leecalcote]

Current State

Users can animate edges in Meshery Designs by adding an annotation in the relationship definition for edges created in designs.

Desired State

Add the following trick to an appropriate page.

Tip:
To enable this animation for an edge, set the animation property of relationship metadata to "marching-ants".

Example filename: edge-firewall.json
Example content:

{                                                                                                                                                                
"schemaVersion": "relationships.meshery.io/v1alpha2",
"version": "v1.0.0",
"kind": "Edge",
"metadata": {
   "description": "A relationship that act as a firewall for ingress and egress traffic from Pods.",
   "animation": "marching-ants",
   "capabilities": {
   "designer": {
      "edit": {
         "style": true,
         "config": false,
         "label": false
         }
      }
   }
},
"model": {
   "name": "kubernetes",
   .....  rest of relationship }
}

---

Contributor Guides and Resources

• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🛠 Meshery Build & Release Strategy
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack

[iushdoescode]

hey lee ,
I am interested to contribute to this issue can i get assigned

[hargunkaur286]

@iushdoescode sure, please go ahead. I'm assigning it to you

[leecalcote]

Incomplete. Reopening...

[leecalcote]

Given your recent question on the topic and in answer to it, @Alero-Awani, will you enhance this doc to include a description and snapshot of this: