{"id":26751,"date":"2018-08-08T09:00:03","date_gmt":"2018-08-07T23:00:03","guid":{"rendered":"https:\/\/codemyui.com\/?p=26751"},"modified":"2018-08-08T06:08:50","modified_gmt":"2018-08-07T20:08:50","slug":"add-delete-bouncy-list-microinteraction","status":"publish","type":"post","link":"https:\/\/codemyui.com\/add-delete-bouncy-list-microinteraction\/","title":{"rendered":"Add &#038; Delete Bouncy List Microinteraction"},"content":{"rendered":"<p>With this beautiful code snippet by <a href=\"https:\/\/twitter.com\/code_dependant\" rel=\"noopener\" target=\"_blank\">Ch\u00e8 Nxusani<\/a> you have a very cool add and delete <a href=\"https:\/\/codemyui.com\/tag\/microinteractions\/\">bouncy micro-interaction<\/a> for the <a href=\"https:\/\/codemyui.com\/tag\/list\/\">unordered list<\/a> item. It can work well for a <a href=\"https:\/\/codemyui.com\/tag\/to-do-list\/\">todo list<\/a> on a website. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/3e43a53b17795a28eb4bb8733a1b4121\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Bouncy List Microinteraction Snippet<\/h2>\n<p class='codepen'  data-height='648' data-theme-id='0' data-slug-hash='uanzj' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Animated List by Che (@code_dependant) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>With this beautiful code snippet by Ch\u00e8 Nxusani you have a very cool add and delete bouncy micro-interaction for the unordered list item. It can work well for a todo list on a website.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/add-delete-bouncy-list-microinteraction\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":26752,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1807,14608,608602270,21858],"class_list":["post-26751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-list","tag-microinteractions","tag-to-do-list","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Add-Delete-Bouncy-List-Microinteraction.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29147,"url":"https:\/\/codemyui.com\/bouncy-subscription-button-to-email-field-microinteraction\/","url_meta":{"origin":26751,"position":0},"title":"Bouncy Subscription Button to Email Field MicroInteraction","author":"Saijo George","date":"January 7, 2020","format":false,"excerpt":"This fancy CTA button has a sweet micro-interaction on click, it animates into a text field asking the user to enter their email effectively acting as an email subscription form. It was designed by Valery Alikin. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"Bouncy Subscription Button to Email Field MicroInteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26441,"url":"https:\/\/codemyui.com\/add-to-close-x-microinteraction\/","url_meta":{"origin":26751,"position":1},"title":"Add + to Close x Microinteraction","author":"Saijo George","date":"June 12, 2018","format":false,"excerpt":"A simple micro-interaction to show the transition from a add(+) icon to a close(x) icon designed by Andreas Storm. If you are having trouble with the pen, try the archived copy on GitHub + to x Microinteraction Snippet","rel":"","context":"In \"microinteractions\"","block_context":{"text":"microinteractions","link":"https:\/\/codemyui.com\/tag\/microinteractions\/"},"img":{"alt_text":"Add + to Close x Microinteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Add-to-Close-x-Microinteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Add-to-Close-x-Microinteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Add-to-Close-x-Microinteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Add-to-Close-x-Microinteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29141,"url":"https:\/\/codemyui.com\/upload-button-to-circular-progress-bar-microinteraction\/","url_meta":{"origin":26751,"position":2},"title":"Upload Button to Circular Progress Bar MicroInteraction","author":"Saijo George","date":"January 7, 2020","format":false,"excerpt":"This sweet upload button animates into a circle on click and that circle acts a progress bar. This micro-interaction was designed by Takane Ichinose. If you are having trouble with the pen, try the archived copy on GitHub Button to Circular Progress Bar Snippet","rel":"","context":"In \"progress bar\"","block_context":{"text":"progress bar","link":"https:\/\/codemyui.com\/tag\/progress-bar\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Upload-Button-to-Circular-Progress-Bar-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Upload-Button-to-Circular-Progress-Bar-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Upload-Button-to-Circular-Progress-Bar-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Upload-Button-to-Circular-Progress-Bar-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26573,"url":"https:\/\/codemyui.com\/email-validation-microinteraction\/","url_meta":{"origin":26751,"position":3},"title":"eMail validation microinteraction","author":"Saijo George","date":"July 8, 2018","format":false,"excerpt":"This text field validation micro interaction by Aaron Iker check for email added to this field and on successfully entering one the @ symbol turns to a tick. This will work well on email signup forms. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"eMail validation microinteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/eMail-validation-microinteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/eMail-validation-microinteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/eMail-validation-microinteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/eMail-validation-microinteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26747,"url":"https:\/\/codemyui.com\/a-list-with-venetian-blinds-rolling-down-animation\/","url_meta":{"origin":26751,"position":4},"title":"A list with venetian blinds rolling down animation","author":"Saijo George","date":"August 8, 2018","format":false,"excerpt":"With this jquery rolling down micro interaction you have list items that falls down one by one kinda simulating the dropping of venetian blinds or a curtain. It was designed by Peter Hrynkow. If you are having trouble with the pen, try the archived copy on GitHub Venetian Blinds List\u2026","rel":"","context":"In \"jquery plugin\"","block_context":{"text":"jquery plugin","link":"https:\/\/codemyui.com\/tag\/jquery-plugin\/"},"img":{"alt_text":"A list with venetian blinds rolling down animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/A-list-with-venetian-blinds-rolling-down-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/A-list-with-venetian-blinds-rolling-down-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/A-list-with-venetian-blinds-rolling-down-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/A-list-with-venetian-blinds-rolling-down-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28962,"url":"https:\/\/codemyui.com\/download-button-with-vertical-progress-indicator-microinteraction\/","url_meta":{"origin":26751,"position":5},"title":"Download Button with Vertical Progress Indicator MicroInteraction","author":"Saijo George","date":"November 25, 2019","format":false,"excerpt":"A simple but effective micro-interaction design for download buttons by Aaron Iker. When you click on one of the download buttons the down icon , the down line jumps up and pulls down a progress indicator kinda like pulling down a shutter and the download icon changes to a tick\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Download Button with Vertical Progress Indicator MicroInteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Download-Button-with-Vertical-Progress-Indicator-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=26751"}],"version-history":[{"count":3,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26751\/revisions"}],"predecessor-version":[{"id":26755,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26751\/revisions\/26755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26752"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}