Added animation in feature section

Monilprajapati commented 7 months ago

Closes #9874

Changes proposed

As we have mentioned in the Issue #9874 i have added the animation in the feature section without using any library such as framer-motion. it is completly made up with Tailwind CSS.

I have created one useElementOnscreen.jsx to observe the each feature card of the feature section to start the animation based on some threshold in viewport. I have added keyframes and animate property in tailwind.config.js file to perform desired animations and finally i have made changes into index.js file which is containing this feature section where i made changes into conditional rendering part of class where the animation is changing based upon the even and odd feature.

Check List (Check all the applicable boxes)

[x] My code follows the code style of this project.
[ ] My change requires changes to the documentation.
[ ] I have updated the documentation accordingly.
[x] All new and existing tests passed.
[x] This PR does not contain plagiarized content.
[x] The title of my pull request is a short description of the requested changes.

Screenshots

Previews: I think the video is lagging but it is my video recorder issue so please consider it else the animation is working well

Laptop screen:

https://github.com/EddieHubCommunity/BioDrop/assets/99136041/94628d3e-33d2-4753-be9c-f2431ba0f070

Tablet screens:

https://github.com/EddieHubCommunity/BioDrop/assets/99136041/fa6e5ce5-f80f-47c9-82ec-a000ede83238

Mobile screens:

https://github.com/EddieHubCommunity/BioDrop/assets/99136041/8b910af7-1581-4ade-8b30-d8659fbe2ac9

Monilprajapati commented 7 months ago

Hey @eddiejaoude

Monilprajapati commented 6 months ago

Hey @eddiejaoude Please look into it i have made it as per your requirements.