layer5io / layer5io/docs

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

Open
#327 4 comments 0 reactions 0 assignees View on GitHub
area/docs framework/hugo language/markdown
Dominant language
JavaScript
Stars
99
Forks
223
Avg merge
1d 1h
Merged PRs (30d)
17

Description

#### 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:

```json
{
"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](https://docs.meshery.io/project/contributing) and Resources
- 📚 [Instructions for contributing to documentation](https://docs.meshery.io/project/contributing/contributing-docs)
- Meshery documentation [site](https://docs.meshery.io/) and [source](https://github.com/meshery/meshery/tree/master/docs)
- 🛠 [Meshery Build & Release Strategy](https://docs.meshery.io/project/build-and-release)
- 🎨 Wireframes and [designs for Layer5 site](https://www.figma.com/file/5ZwEkSJwUPitURD59YHMEN/Layer5-Designs) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/qJy1c95qirjgWQODApilR9)
- 🙋🏾🙋🏼 Questions: [Layer5 Discussion Forum](https://discuss.layer5.io) and [Layer5 Community Slack](http://slack.layer5.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.