{"id":13632,"date":"2017-03-23T23:32:09","date_gmt":"2017-03-23T13:32:09","guid":{"rendered":"https:\/\/codemyui.com\/?p=13632"},"modified":"2018-05-16T16:58:28","modified_gmt":"2018-05-16T06:58:28","slug":"text-implode-bouncy-fullstop","status":"publish","type":"post","link":"https:\/\/codemyui.com\/text-implode-bouncy-fullstop\/","title":{"rendered":"Text Implode to a Bouncy Fullstop"},"content":{"rendered":"<p>A really awesome <a href=\"https:\/\/codemyui.com\/tag\/text-animation\/\">text effect<\/a>, where the text implodes into a bouncy dot. It was designed by <a href=\"https:\/\/twitter.com\/pixel_arts\" target=\"_blank\" rel=\"noopener\">Maxime Bonhomme<\/a>.<\/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\/167f76d502fe3c8774d80f06eef743c1\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Text to Dot Snippet<\/h2>\n<p class='codepen'  data-height='526' data-theme-id='0' data-slug-hash='WxkJRk' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Bouncy full stop by Maxime Bonhomme (@maximebonhomme) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>A really awesome text effect, where the text implodes into a bouncy dot. It was designed by Maxime Bonhomme.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/text-implode-bouncy-fullstop\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":13637,"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":false,"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,1512930],"class_list":["post-13632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/bouncy-full-stop.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4244,"url":"https:\/\/codemyui.com\/wavy-text-bouncy-letter-animation\/","url_meta":{"origin":13632,"position":0},"title":"Wavy Text With Bouncy Letter Animation","author":"Hima Vincent","date":"November 14, 2016","format":false,"excerpt":"This is a text animation designed by Raul Dronca, the text has a wavy animation and each individual characters has a bouncy effect with shadows and all. This will work well in any section where you want to add some really cool effect to a block of text. If you\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Wavy Text With Bouncy Letter","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29147,"url":"https:\/\/codemyui.com\/bouncy-subscription-button-to-email-field-microinteraction\/","url_meta":{"origin":13632,"position":1},"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":1669,"url":"https:\/\/codemyui.com\/text-animation-bounce-effect\/","url_meta":{"origin":13632,"position":2},"title":"Text Animation With Bounce Effect","author":"Hima Vincent","date":"August 18, 2016","format":false,"excerpt":"Check out this cool bouncy type text animation that can be used in your web projects designed by J Scott Smith. In this code snippet, when you click anywhere on the screen the entire text will slide from the top left corner of the page with a boxed shadow effect.\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Text Animation With Bouncey Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/text-animation-with-bouncey-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/text-animation-with-bouncey-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/text-animation-with-bouncey-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/08\/text-animation-with-bouncey-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2945,"url":"https:\/\/codemyui.com\/bouncy-countdown-timer-svg\/","url_meta":{"origin":13632,"position":3},"title":"Bouncy Countdown Timer in SVG","author":"Hima Vincent","date":"October 21, 2016","format":false,"excerpt":"This simple bouncy countdown timer is great when you want to add a countdown clock to your web project. Using SVG animation the numbers are given a nice little bouncy effect as it counts down, designed by Siddharth Parmar If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"counter\"","block_context":{"text":"counter","link":"https:\/\/codemyui.com\/tag\/css-counter\/"},"img":{"alt_text":"Bouncy Countdown Timer in SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/bouncy-countdown-timer-in-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/bouncy-countdown-timer-in-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/bouncy-countdown-timer-in-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/bouncy-countdown-timer-in-svg.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26751,"url":"https:\/\/codemyui.com\/add-delete-bouncy-list-microinteraction\/","url_meta":{"origin":13632,"position":4},"title":"Add &#038; Delete Bouncy List Microinteraction","author":"Saijo George","date":"August 8, 2018","format":false,"excerpt":"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. If you are having trouble with the pen, try the archived copy on GitHub Bouncy List\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Add & Delete Bouncy List Microinteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Add-Delete-Bouncy-List-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\/08\/Add-Delete-Bouncy-List-Microinteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Add-Delete-Bouncy-List-Microinteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Add-Delete-Bouncy-List-Microinteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29929,"url":"https:\/\/codemyui.com\/irregular-3d-button-with-bouncy-click-effect-and-shadow\/","url_meta":{"origin":13632,"position":5},"title":"Irregular 3D button with Bouncy Click Effect and Shadow","author":"Saijo George","date":"June 4, 2020","format":false,"excerpt":"Code by: Dion Dermott from Codepen If you are having trouble with the pen, try the archived copy on GitHub Irregular Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Irregular-3D-button-with-Bouncy-Click-Effect-and-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Irregular-3D-button-with-Bouncy-Click-Effect-and-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Irregular-3D-button-with-Bouncy-Click-Effect-and-Shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/06\/Irregular-3D-button-with-Bouncy-Click-Effect-and-Shadow.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\/13632","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=13632"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13632\/revisions"}],"predecessor-version":[{"id":25872,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13632\/revisions\/25872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/13637"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=13632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=13632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=13632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}