{"id":74,"date":"2015-12-08T07:37:09","date_gmt":"2015-12-08T07:37:09","guid":{"rendered":"http:\/\/codemyui.com\/cool-modal-animations\/"},"modified":"2018-05-17T12:51:16","modified_gmt":"2018-05-17T02:51:16","slug":"cool-modal-animations","status":"publish","type":"post","link":"https:\/\/codemyui.com\/cool-modal-animations\/","title":{"rendered":"Cool Modal Animations"},"content":{"rendered":"<p>Check out this cool collection of modal animations which are class-drive and are animating the exact same HTML elements. Designed by <a href=\"https:\/\/twitter.com\/designcouch\" target=\"_blank\" rel=\"noopener\">Jesse Couch<\/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\/60aa0f3b1e8589bb5bff\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='387' data-theme-id='0' data-slug-hash='obvKxm' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Check out this cool collection of modal animations which are class-drive and are animating the exact same HTML elements. Designed by Jesse Couch.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/cool-modal-animations\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":537,"comment_status":"open","ping_status":"open","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,5441733,195143],"class_list":["post-74","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-animation","tag-modal-window","tag-pop-up","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/12\/cool-modal-animations.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25312,"url":"https:\/\/codemyui.com\/ink-blot-modal-using-video-blend-modes\/","url_meta":{"origin":74,"position":0},"title":"Ink Blot Modal Using Video &amp; Blend Modes","author":"Saijo George","date":"January 8, 2018","format":false,"excerpt":"This is an epic modal created using Video & Blend Modes where the modal opens with an ink blot spreading like animation effect when you click on it. Unfortunately, it does not have a close effect for now. It was designed by Jamie Coulter If you are having trouble with\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Ink Blot Modal Using Video & Blend Modes Video","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Ink-Blot-Modal-Using-Video-Blend-Modes-Video.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Ink-Blot-Modal-Using-Video-Blend-Modes-Video.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Ink-Blot-Modal-Using-Video-Blend-Modes-Video.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/Ink-Blot-Modal-Using-Video-Blend-Modes-Video.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":184,"url":"https:\/\/codemyui.com\/motion-blur-experiment-on-modal-window\/","url_meta":{"origin":74,"position":1},"title":"Motion Blur Experiment on Modal Window","author":"Hima Vincent","date":"September 11, 2015","format":false,"excerpt":"Check out this cool motion blur effect using SVG applied to a modal window. Designed by Lucas Bebber. If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Motion Blur Experiment on Modal Window","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/motion-blur-experiment-on-modal-window.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/motion-blur-experiment-on-modal-window.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/motion-blur-experiment-on-modal-window.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/motion-blur-experiment-on-modal-window.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26845,"url":"https:\/\/codemyui.com\/button-into-modal-form-animation\/","url_meta":{"origin":74,"position":2},"title":"Button into Modal Form Animation","author":"Saijo George","date":"September 14, 2018","format":false,"excerpt":"If you want to show a circular button that morphs into a user submission form then this snippet by Greg Hovanesyan is just what you need. If you are having trouble with the pen, try the archived copy on GitHub Button into Modal Form Snippet \u00a0","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Button into Modal Form Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Button-into-Modal-Form-Animation-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Button-into-Modal-Form-Animation-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Button-into-Modal-Form-Animation-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Button-into-Modal-Form-Animation-1.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29771,"url":"https:\/\/codemyui.com\/animated-cookie-consent-modal-form\/","url_meta":{"origin":74,"position":3},"title":"Animated Cookie Consent Modal Form","author":"Saijo George","date":"April 30, 2020","format":false,"excerpt":"Code by: \u00c1lex S. L\u00e9rida from Codepen If you are having trouble with the pen, try the archived copy on GitHub Cookie Consent Snippet","rel":"","context":"In \"modal window\"","block_context":{"text":"modal window","link":"https:\/\/codemyui.com\/tag\/modal-window\/"},"img":{"alt_text":"Animated Cookie Consent Modal Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Animated-Cookie-Consent-Modal-Form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Animated-Cookie-Consent-Modal-Form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Animated-Cookie-Consent-Modal-Form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Animated-Cookie-Consent-Modal-Form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30557,"url":"https:\/\/codemyui.com\/strikethrough-text-with-explanations-in-modal-on-hover\/","url_meta":{"origin":74,"position":4},"title":"Strikethrough Text With Explanations In Modal On Hover","author":"Hima Vincent","date":"August 2, 2021","format":false,"excerpt":"Code by: eightarmshq If you are having trouble with the pen, try the archived copy on GitHub. Strikethrough Text In Modal On Hover Snippet","rel":"","context":"In \"del ins\"","block_context":{"text":"del ins","link":"https:\/\/codemyui.com\/tag\/del-ins\/"},"img":{"alt_text":"Strikethrough Text With Explanations In Modal On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/08\/Strikethrough-Text-With-Explanations-In-Modal-On-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30452,"url":"https:\/\/codemyui.com\/stick-icon-on-right-side-expand-to-modal-with-store-opening-time\/","url_meta":{"origin":74,"position":5},"title":"Stick Icon On Right Side Expand To Modal With Store Opening Time","author":"Hima Vincent","date":"June 17, 2021","format":false,"excerpt":"Code by: Lisi If you are having trouble with the pen, try the archived copy on GitHub. Modal With Store Opening Time Click Animation Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Stick Icon On Right Side Expand To Modal With Store Opening Time","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Stick-Icon-On-Right-Side-Expand-To-Modal-With-Store-Opening-Time.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\/74","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=74"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/74\/revisions"}],"predecessor-version":[{"id":26180,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/74\/revisions\/26180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/537"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=74"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}