GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → PaddiM8 → Morpherings

PaddiM8 / Morpherings

CSS Animations that cause buttons to morph into forms.

Labels

cssanimationformstransition

Projects that are alternatives of or similar to Morpherings

Dirty Check Forms
🐬Detect Unsaved Changes in Angular Forms
Stars: ✭ 105 (-13.22%)
Mutual labels:  forms
React Forms
React library for rendering forms.
Stars: ✭ 111 (-8.26%)
Mutual labels:  forms
Easytransitions
A simple way to create custom interactive UIViewController transitions
Stars: ✭ 1,592 (+1215.7%)
Mutual labels:  transition
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-11.57%)
Mutual labels:  forms
Hooked Form
Performant 2KB React library to manage your forms
Stars: ✭ 110 (-9.09%)
Mutual labels:  forms
Liform
PHP library to render Symfony Forms to JSON Schema
Stars: ✭ 113 (-6.61%)
Mutual labels:  forms
Nostyle
Design System
Stars: ✭ 101 (-16.53%)
Mutual labels:  forms
Htmllabelplugin
Use this Xamarin.Forms plugin to display HTML content into a label.
Stars: ✭ 119 (-1.65%)
Mutual labels:  forms
Meteor Autoform
AutoForm is a Meteor package that adds UI components and helpers to easily create basic forms with automatic insert and update events, and automatic reactive validation.
Stars: ✭ 1,453 (+1100.83%)
Mutual labels:  forms
React Router Transitions
Easily handle transitions in your React application 🍃
Stars: ✭ 117 (-3.31%)
Mutual labels:  transition
Pypdftk
Python module to drive the awesome pdftk binary.
Stars: ✭ 107 (-11.57%)
Mutual labels:  forms
Quick Survey
A tool for quick surveys, try it out. (No longer maintained).
Stars: ✭ 109 (-9.92%)
Mutual labels:  forms
React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-5.79%)
Mutual labels:  forms
Redux Idle Monitor
A Redux component to schedule events at stages of user idleness across multiple browser tabs.
Stars: ✭ 105 (-13.22%)
Mutual labels:  transition
Form For
ReactJS forms made easy
Stars: ✭ 118 (-2.48%)
Mutual labels:  forms
I7j Pdfhtml
pdfHTML is an iText 7 add-on for Java that allows you to easily convert HTML and CSS into standards compliant PDFs that are accessible, searchable and usable for indexing.
Stars: ✭ 104 (-14.05%)
Mutual labels:  forms
Clone Section Of Form Es6 Or Jquery
Now on npm. Using vanilla JavaScript (ES6) or jQuery to duplicate a section of a form, maintaining accessibility (a11y).
Stars: ✭ 112 (-7.44%)
Mutual labels:  forms
Vue Formulate
⚡️ The easiest way to build forms with Vue.
Stars: ✭ 1,947 (+1509.09%)
Mutual labels:  forms
Pixelwave
Fully customizable pixel wave animation for seamless page transitions.
Stars: ✭ 119 (-1.65%)
Mutual labels:  transition
React Auto Form
Simplifies getting user input from forms via onChange and onSubmit events, using DOM forms APIs
Stars: ✭ 116 (-4.13%)
Mutual labels:  forms
View All Similar Projects ➔

Morpherings

CSS3 Animations that causes buttons to morph into forms. A few lines of javascript is used for triggering. This is mostly a personal project I made for fun, but I can imagine it being useful in some situations. For example if you don't want to redirect the user to another page to sign up. Depending on your website layout it could be a bit too verbose to have a extensive form in the middle of the webiste, with these animations the form appears only when you want it to. Which allows you to have a less cluttered page. A smooth animation is quicker than loading a new page.

Accessibility

Having accessible forms is important. Therefore, I have done my best to make the forms accessible. Animation1 has been tested with JAWS, and seems to be working perfectly fine, however I am quite inexperienced with using screen readers so it might not be perfect! You may want to test it out yourself. Animation2 has aria tags(credits to scottaohara for helping with this) and should be quite accessible, although not perfect.

GIFs

Animation 1

Animation 2

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].