Sliding Transition on Menu

[ayushtom]

I want this really nice animation on the leaderboard and the menu on dashboard and home page. This would make the experience really nice! The main selected color of the menu should be white and the hover should be a slight gray which you can pick from globals.css as to how you think it will look nice in!

https://codepen.io/jh3y/pen/GRapZqO

[No-bodyq]

@ayushtom Can I hop on this. To tackle this, I would utilize the CSS transition property and include a duration to create a smooth animation.

[abdulqaharu]

@ayushtom I would like to work on this

[Oshioke-Salaki]

Hello i am a front end developer and i would like to work on this issue I would address it by using the transistion css property and i would add a duration to make it a smooth animation. I would also do research on the link provided to see how it was implemented and try to do it and make it even better

[od-hunter]

Hello @ayushtom Project Setup:

I will use React JS and CSS transitions to achieve the desired goal. State Management:

I will create two states: checked and unchecked. I will determine the checked state by whether the page is active or if the menu element is clicked. I will implement an onClick function to toggle states. Styling the Menu Element:

Checked State: I will set the background color to white. I will set the text color to black. Unchecked State: I will ensure there is no background color, thus inheriting the background color of the initial div container. Smooth Animation:

I will achieve smooth transitions using CSS transitions. Hover Effect:

I will use CSS hover to apply a gray background color on hover. Please,I'll like to be given the opportunity to work on this project. I'm a first timer and I'll like to make my first contribution on Starknet. I promise to give in my best.

[DanielEmmanuel1]

Hello @ayushtom , I'm a frontend JavaScript developer and would like to take this project.

First to reach the desired goal of the project i would use react JS and CSS transitions, firstly I would create 2 states, a checked and unchecked state, the checked stated will be determined if the particular page isActive or if the menu element is clicked so there will be an onClick function.

When the page is active it means its already in checked stated, therefore making the menu element take the background color of white and the text being black, the unchecked element will have no background color therefore taking the bg-color of the initial div container.

For the smooth animation, that can be achieved by using CSS transitions and also the hover of gray can be achieved by using css hover.

[ghost]

Hello @ayushtom , I am a front-end developer and I would like to work on this issue. My approach involves the following steps:

Implement Smooth Animations: I will use the CSS transition property to create smooth animations for the leaderboard and the menu on the dashboard and home page. This will enhance the user experience by making interactions more visually appealing.

Menu Styling: The main selected color of the menu will be set to white, and the hover color will be a subtle gray. I will choose an appropriate shade of gray from globals.css to ensure it complements the overall design aesthetic.

Research and Enhancement: I will review the provided link to understand the current implementation. Based on this research, I will implement the necessary changes and strive to improve the existing design for an even better user experience.

This is my first time participating in an OD hack, and it would be an honor to contribute to this project. I am excited about the opportunity to bring my skills and creativity to the team.

[VictoriaAde]

I would like to work on this. I would add a sliding transition to the menu using CSS animation.

[bhavyagosai]

hey @ayushtom have suggested you a potential video implementation which I did for this already on TG dms.

Essentially the states used here are to store the hoverStyle which holds the CSS properties (width, height, left, top, and opacity) for the hover effect background and isFirstHover which tracks whether it's the first time an item is being hovered over, to handle the initial transition smoothly.
Two functions working here:

1. handleMouseEnter:

   • It calculates the position and size of the hovered item.
   • Updates the hoverStyle state to move the hover background to the new item's position and size.
   • Sets a smooth transition for the hover effect.
   • Also updates isFirstHover to false after the first hover.

2. handleMouseLeave:

   • It sets the opacity of the hover background to 0, making it fade out smoothly.
     Based on your suggestions can update and wrap up this animation.

[BlackStarkGoku]

Hi @ayushtom, what about using framer-motion, that is a really nice animation library which can be useful for future components. I have actually already used It to do this kind of effect

https://github.com/starknet-id/starknet.quest/assets/165695008/dfcd06b2-6bdb-41cb-a311-3e9ed72205c5

[ayushtom]

@BlackStarkGoku i love playing arounf with framer motion too! but unfortunately in this case since only for few animations we can't add a package like framer motion which is slightly on the heavier side. Maybe when we plan to add many more animations then we can plan to add framer motion and tackle all of them with this!

[ayushtom]

@DanielEmmanuel1 assigning to you since it's your first issue with us

[DanielEmmanuel1]

701 All done @ayushtom

Please review