[Animation] Animate Meshery Architecture

[saurabhraghuvanshii]

Current Behavior

Currently, we just have a simple Architecture for Meshery, without any interaction.

Desired Behavior

Animate the Architecture diagram of Meshery and add the export source in .gif

Screenshots / Mockups

Link to slide - https://docs.google.com/presentation/d/1SQMfyu5shjpGKlYONdVzOtd7UYTgLWBcgUvHMLCZ2tY/edit#slide=id.g8b59c65a6a_0_249

Fill the newcomers form to access the slide deck - https://layer5.io/newcomers

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[snakefood3232]

I see we're looking to animate the Meshery Architecture diagram and produce a .gif as the export source. I'd handle this by creating a smooth CSS animation that enhances user interaction, ensuring the transitions align with the existing design language. I'd export this to a .gif using FFMPEG after testing in-browser to maintain quality. Can have a PR up in 2-3 days. I've worked on similar animations for interactive diagrams in previous projects.

[saurabhraghuvanshii]

Thanks @snakefood3232 waiting for Pr

[Neeraj-code-beep]

@saurabhraghuvanshii can you assign this issue to me ?

[saurabhraghuvanshii]

@Neeraj-code-beep already assigned to @snakefood3232 let's wait for few days.

[saurabhraghuvanshii]

haven’t heard back from @snakefood3232 . @Neeraj-code-beep Do you want to work on this issue?