layer5 icon indicating copy to clipboard operation
layer5 copied to clipboard

[Animation] Add animation to "Manage your Cloud Native mess" section on homepage

Open ritiksaxena124 opened this issue 1 year ago β€’ 8 comments

Current Behavior

The integrations shown inside the section are static, There is no animation image

Desired Behavior

Add animation such that the integrations integrations at the first column move in a downward direction and integrations in the second column move upward direction infinitely.


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.

ritiksaxena124 avatar May 02 '24 08:05 ritiksaxena124

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.


Β  Β  Β  Β  Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

github-actions[bot] avatar May 02 '24 08:05 github-actions[bot]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.


Β  Β  Β  Β  Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

github-actions[bot] avatar May 02 '24 08:05 github-actions[bot]

Hi this looks like a interesting could I be assigned to this issue?

JonathanKoerber avatar May 08 '24 17:05 JonathanKoerber

Sure @JonathanKoerber go ahead πŸ‘

ritiksaxena124 avatar May 08 '24 17:05 ritiksaxena124

Hi, making progress but don't quite have it figured out. Should be able to be done my the end of this week.

JonathanKoerber avatar May 13 '24 17:05 JonathanKoerber

@hargunkaur286

sudhanshutech avatar Jun 10 '24 11:06 sudhanshutech

Hi @sudhanshutech and @ritiksaxena124 I have made the animation. To make it visible there is a check that I've disabled. Am I Ok to disable the ckeck. It seem to check if the images are inside the screen with this import { useInView } from "react-intersection-observer".

layer5-animation

Please let me know what I should do.

JonathanKoerber avatar Jun 13 '24 02:06 JonathanKoerber

For more context this is the check that I've disabled. Its seems to be an external library.

Screenshot from 2024-06-12 19-39-09

JonathanKoerber avatar Jun 13 '24 02:06 JonathanKoerber