usmanahmadsaeed/animations

Animations is an open source collection of coded animations, containing but not limited to loaders, menus, scroll transitions, and much more.

Animations Overview

Animations is an open source collection of coded animations, containing but not limited to loaders, menus, scroll transitions, and much more. We are always looking to expand our collection for open-source use and welcome all contributions that follow guidelines.

A list of animations currently in this collection is available at the end of this document.

Community Health Guidelines

If guidelines are not followed, PRs will be marked as spam without warning. Some examples include, commits and PRs without appropriate description, code without appropriate comments, using of prohibited frameworks etc.

Code of Conduct

Submitting A Question

How To Contribute

Status

Help is needed in defining better guidelines, rules and creating a site to showcase projects. Please feel free to contribute.

Animations List

Click Animations

• Big Button

Card Animations

• Card
• Card1
• Card Stack

Hover Animations

• RGB button animation
• Glow Icons

Load Animations

• Expanding Circle Loader
• Jumping Dots Loader
• Rotating Circle Loader Simple
• Wires Pull SVG Loader
• Bouncing Circles
• Ghost Loading Animation
• Simple Loading Bar

Form Animations

• Login Person

Menu Animations

• Outside Curve Navigation Menu
• Liquid Animation
• Clipping Navigation Menu

Filtered animations (to be improved or removed)

• Flip Animation on Hover
• Heartbeat Loader
• Looping Circle
• Tilting Animation on Hover

animations's Issues

Loading Animation

synchronised bouncing dots using HTML and CSS only.

Add new animations (hacktoberfest)

For the Hacktoberfest event, we're giving you the opportunity to complete the challenge by contributing new animations.
Please read the guidelines (readme.md file) on how to add animations to this repository.

Improved ReadMe

With the request for landing page and separate contributions guideline, it'd be necessary to update and improve the ReadMe to include more information about Animations, Open-Source, and relevant information about this repo, etc.

Separate and detailed contribution guideline

We need to make a separate contributions.md guidelines file that has
the rules for quality PRs,
who and what can be added,
how-to contribute
etc

Update ReadMe

ReadMe file of the repo needs updating to properly link to all animations in all folders. For example, some links are broken and some are not categorized correctly.
HMU for further details or clarification.

Format and Organize "Form Animation" folder

The form animations folder wasn't in the proper format of the repository and therefore needs renaming and re-organization of files into proper folder and names.

Issue

Inconsistent file and folder structure in "Form Animations"

Required

1. Change folder name "form"to a better and descriptive name of the animation.
2. Move "index.html" and "style.css" to the renamed folder.
3. Move ReadMe.md from the "form" folder to main "Form Animations" directory, or delete it.

Update/Delete README.MD from folders other than root

Issue

Almost all the folders contain a generic readme.md file

Required

Update the README.MD files with information of relevant folder, or delete these files from all folders other than root.

Add Animation links in Readme

README.md file needs to be updated with links to all animations inside repository folders, under Animation Link heading.
Use the already included link inside README.md for guidance.

Card Hover Animations

Want to do some changes in card animations and add new cards with more animations.

card Animation

Add New Card animations

Neon Animation

Hi, My name is Krunal and i want to contribute for Neon Animations for button which reflects their mirror image

Create a custom landing page

We do not have a landing page for this site yet.
It'd be great to make one for publishing on Github Pages.
Landing page should

1. describe the purpose of this repository
2. general information
3. a gallery of available animations(mini demo)
4. navigation between animations

Add New Animation - Glow Animation

Adding example for glow animation using CSS.
Added new folder - Glow Animation and added index.html and style.css
#Hacktoberfest #Hacktoberfest2022