Closed Shivam-AfA closed 1 year ago
Should be SVG image(s) only. Try manipulating the CSS from the on hover affect on this page: https://meshery.io/catalog.
I want to work on it; assign this to me.
@sanyamjain036 what do you think about the css animation on the Meshery Catalog page?
On hovering those svgs at the top of the page makes me feel dizzy. Also, I can animate catalog boxes while scrolling. @leecalcote Should I do it, with this PR?
Hey @Shivam-AfA @leecalcote, I have made this CSS animation similar to the one in the image (a ripple effect) when the object has hovered. It's been more than a month since the issue was addressed. Can I work on this? Please assign this issue to me.
Looking good, @niranjan-kurhade
Thanks, @leecalcote for assigning me this issue. Which object should have the ripple effect when it is hovered? Do I have to give the ripple effect on the meshery page(Different repo)?
@shivam-afa
Hey, @Shivam-AfA Can you guide which object should have the ripple effect on the layer5 website?
@niranjan-kurhade Thanks for implementing this, currently we're not specific about the place where this should be used. You can add this animation in the form of a react-component in the repo. It'll be published when a suitable UX need is identified.
You can add this under src/components directory.
Another way of saying this is that @Shivam-AfA needs to complete his work so that this new animation can land on https://layer5.io/cloud-native-management/meshmap/design. πThere is an open PR on this topic.
Desired Situation
A CSS animation similar to the one in the image (a ripple effect) is required when the object is hovered.
SVG link: https://github.com/layer5io/layer5/blob/master/src/collections/integrations/nginx-service-mesh/icon/color/nginx-service-mesh-color.svg
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
master
branch.Join the Layer5 Community by submitting your community member form.