{"id":25103,"date":"2017-11-15T19:42:06","date_gmt":"2017-11-15T09:42:06","guid":{"rendered":"https:\/\/codemyui.com\/?p=25103"},"modified":"2017-11-15T19:42:06","modified_gmt":"2017-11-15T09:42:06","slug":"paint-dripping-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/paint-dripping-animation\/","title":{"rendered":"Paint Dripping Animation"},"content":{"rendered":"<p>This dripping <a href=\"https:\/\/codemyui.com\/tag\/animation\/\">animation<\/a> designed by <a href=\"https:\/\/twitter.com\/DonKarlssonSan\" target=\"_blank\" rel=\"noopener\">Johan Karlsson<\/a> looks like it will be a great addition to the <a href=\"https:\/\/codemyui.com\/tag\/halloween\/\">Halloween section<\/a> if it was in green or red. The effect feels like what you might see when you throw paint on to a wall. <\/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\/f5e54a92a2545d1677177eeef328394f\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Paint Dripping Snippet<\/h2>\n<p class='codepen'  data-height='488' data-theme-id='0' data-slug-hash='mmRrzQ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Solid Black | Dripping by Johan Karlsson (@DonKarlssonSan) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This dripping animation designed by Johan Karlsson looks like it will be a great addition to the Halloween section if it was in green or red. The effect feels like what you might see when you throw paint on to a wall.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/paint-dripping-animation\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25104,"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,6168,38934147],"class_list":["post-25103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-halloween","tag-hero-section","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/solid-black-dripping-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":24791,"url":"https:\/\/codemyui.com\/gooey-drip-webpage-halloween\/","url_meta":{"origin":25103,"position":0},"title":"Gooey drip on you webpage for Halloween","author":"Hima Vincent","date":"October 17, 2017","format":false,"excerpt":"Here is a cool little Halloween script to add a green gooey drip to the header of your webpage. It was designed by Mike Foskett. If you are having trouble with the pen, try the archived copy on GitHub Halloween Slime Snippet","rel":"","context":"In \"halloween\"","block_context":{"text":"halloween","link":"https:\/\/codemyui.com\/tag\/halloween\/"},"img":{"alt_text":"Gooey drip on you webpage for Halloween","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/gooey-drip-on-you-webpage-for-halloween.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/gooey-drip-on-you-webpage-for-halloween.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/gooey-drip-on-you-webpage-for-halloween.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/gooey-drip-on-you-webpage-for-halloween.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25620,"url":"https:\/\/codemyui.com\/spilled-paint-animation-on-click\/","url_meta":{"origin":25103,"position":1},"title":"Spilled Paint Animation on Click","author":"Saijo George","date":"April 20, 2018","format":false,"excerpt":"With this snippet, we can see paint dripping from the top of the screen on mouse click. It was designed by Darryl Huffman and will look great in the hero section of any website. If you are having trouble with the pen, try the archived copy on GitHub Spilled Paint\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Spilled Paint Animation on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/04\/Spilled-Paint-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27020,"url":"https:\/\/codemyui.com\/thread-projection-text-effect\/","url_meta":{"origin":25103,"position":2},"title":"Thread Projection Text Effect","author":"Saijo George","date":"January 7, 2019","format":false,"excerpt":"In this text effect by Johan Karlsson you can see the text projects thread like tentacles from it and it reacts to moving particles in the animation. If you are having trouble with the pen, try the archived copy on GitHub Text Effect Snippet","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Thread Projection Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Thread-Projection-Text-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Thread-Projection-Text-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Thread-Projection-Text-Effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/01\/Thread-Projection-Text-Effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12340,"url":"https:\/\/codemyui.com\/dripping-down-arrow\/","url_meta":{"origin":25103,"position":3},"title":"Dripping Down Arrow","author":"Hima Vincent","date":"March 6, 2017","format":false,"excerpt":"This is a fancy scroll icon designed by Thomas N\u00e4gele. It's great when you want to show a visual cue to you visitors to indicate there is more content when you scroll down. If you are having trouble with the pen, try the archived copy on GitHub Animated Down Arrow\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Dripping Down Arrow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dripping-down-arrow.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dripping-down-arrow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dripping-down-arrow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/dripping-down-arrow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27330,"url":"https:\/\/codemyui.com\/google-thanos-disintegration-snippet\/","url_meta":{"origin":25103,"position":4},"title":"Google Thanos Disintegration Snippet","author":"Saijo George","date":"May 7, 2019","format":false,"excerpt":"Check out the simple script that will help you recreate the Google Thanos particle disintegration effect with a little bit of CSS and html2canvas.js, it was created by Johan Fagerbeg. When you click on the cards it starts to disintegrate and fades way into dust. This can work well as\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Google-Thanos-Disintegration-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Google-Thanos-Disintegration-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Google-Thanos-Disintegration-Snippet.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Google-Thanos-Disintegration-Snippet.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24797,"url":"https:\/\/codemyui.com\/button-delivery-truck-animation\/","url_meta":{"origin":25103,"position":5},"title":"Button to Delivery Truck Animation","author":"Hima Vincent","date":"October 18, 2017","format":false,"excerpt":"I am in love with this checkout button animation designed by Johan from Nerdmanship, when you click on the ship it button it transforms into a truck and drives away signalling the item is getting shipped. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button to Delivery Truck Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/button-to-delivery-truck-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/button-to-delivery-truck-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/button-to-delivery-truck-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/button-to-delivery-truck-animation.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\/25103","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=25103"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25103\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25104"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}