The purpose of this collection is to provide hands-on experience and inspiration for developers interested in mastering animation and transition effects in web development. Each project offers a unique insight into different aspects of creating engaging user experiences through motion and interactivity.

In order to run this project you need:

• Installed Git.
• Installed npm
• Installed VS code(code editor)

• HTML
• CSS
• JAVASCRIPT

Each project folder contains the necessary HTML, CSS, and JavaScript files. To run any project:

1. Clone this repository.
2. run `npm install` to install packages
3. Navigate to the project folder.
4. Open the index.html file in your preferred web browser.

Feel free to explore, modify, and experiment with the code to better understand how these animations and transitions are achieved.

(back to top)

1. Expanding Cards

   "Expanding Cards" is an interactive web layout where clicking on an image expands it while automatically minimizing other cards, offering a captivating and organized way to explore content with seamless transitions and intuitive design.

   • Live Demo
   • Source
2. Hidden Search bar

   Hidden Search Bar discreetly expands upon toggling, seamlessly integrating a sleek and intuitive search feature into interfaces, enhancing user accessibility and experience.

   • Live Demo
   • Source
3. Blurry Image

   "Blurry Image" project utilizes covert blurring on page load, gradually transitioning images from a blurred state to crystal clear, enhancing visual experience seamlessly.

   • Live Demo
   • Source
4. Progressing steps

   "Progressing Steps" project showcases dynamic button effects, visually demonstrating progression through color fills upon each click, embodying interactive advancement in just a tap.

   • Live Demo
   • Source
5. Rotating Navigation

   "Rotating Navigation" is a dynamic project where clicking the menu bar triggers a 45-degree screen rotation, offering an engaging and unique user experience through interactive navigation.

   • Live Demo
   • Source
6. Scroll Animation

   "Scroll Animation" is a dynamic project that imbues scrolling web pages with captivating animation effects, elevating the user experience through visually engaging content transitions triggered by scrolling actions.

   • Live Demo
   • Source
7. Split Landing Page

   "Experience the 'Split Landing Page' - a dynamic interface that expands upon hover, providing an immersive view, and seamlessly minimizes upon mouse removal. Engage with captivating button glow effects, adding a touch of interactivity to your browsing journey."

   • Live Demo
   • Source
8. Form Wave Animation

   Enhancing user interaction, this form features dynamic label animations with a mesmerizing wave effect, complemented by a gradient background for a stylish and immersive visual experience.

   • Live Demo
   • Source
9. Rock Paper Scissor

   Introducing a classic Rock, Paper, Scissors game with a modern twist. Experience the thrill of strategic choices and animated outcomes in this engaging web application, designed for both fun and interactive play.

   • Live Demo
   • Source

(back to top)

If you wish to contribute to this collection by adding your own projects or enhancing existing ones, please follow these steps:

• Fork this repository.
• Create a new branch `(git checkout -b feature/add-your-feature)`.
• Make your modifications.
• Commit your changes `(git commit -am 'Add new feature')`.
• Push to the branch `(git push origin feature/add-your-feature)`.
• Create a new Pull Request.

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

These projects were curated and developed by Tajul Afreen and inspired by various online resources and tutorials. Contributions from the open-source community are welcomed and appreciated.

👤 Tajul Afreen

• GitHub: tajulafreen
• LinkedIn: tajul-afreen
• Wellfound: tajul-afreen
• Twitter: tajulafreen

(back to top)

If you liked this project, give it a ⭐️ and kindly send to me an e-mail expressing it, it would make our day and fuel our motivation.

This project is MIT licensed.

(back to top)