GitHub<\/a><\/p>\nSimple Tab Animation Snippet<\/h2>\n
\nSee the Pen WpXEWN by Saijo George (@SaijoGeorge) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
A simple tab style animation designed by Tony Soprano.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":13096,"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":[239174062,14608],"class_list":["post-13091","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accordion-tabs","tag-list","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/tab-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":30191,"url":"https:\/\/codemyui.com\/responsive-bookshelf-grid-with-tilt-hover-animation\/","url_meta":{"origin":13091,"position":0},"title":"Responsive Bookshelf Grid With Tilt Hover Animation","author":"Hima Vincent","date":"May 18, 2021","format":false,"excerpt":"Code by: Andy Barefoot If you are having trouble with the pen, try the archived copy on GitHub Responsive Bookshelf Grid Snippet","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Responsive CSS Bookshelf Grid","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Responsive-CSS-Bookshelf-Grid.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30229,"url":"https:\/\/codemyui.com\/grayscale-to-colour-animation-on-hover-for-team-section\/","url_meta":{"origin":13091,"position":1},"title":"Grayscale To Colour Animation On Hover For Team Section","author":"Hima Vincent","date":"May 30, 2021","format":false,"excerpt":"Code by: Piccalilli If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Grayscale To Colour For Image Grid Snippet","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Grayscale To Colour Animation On Hover For Team Section","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Grayscale-To-Colour-Animation-On-Hover-For-Team-Section.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Grayscale-To-Colour-Animation-On-Hover-For-Team-Section.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Grayscale-To-Colour-Animation-On-Hover-For-Team-Section.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Grayscale-To-Colour-Animation-On-Hover-For-Team-Section.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30241,"url":"https:\/\/codemyui.com\/login-modal-with-floating-placeholder-and-animated-neon-submit-button\/","url_meta":{"origin":13091,"position":2},"title":"Login Modal With Floating Placeholder And Animated Neon Submit Button","author":"Hima Vincent","date":"May 30, 2021","format":false,"excerpt":"Code by: Soufiane Khalfaoui Hassani If you are having trouble with the pen, try the archived copy on\u00a0GitHub. Login Screen With A Neon Button Snippet","rel":"","context":"In \"login form\"","block_context":{"text":"login form","link":"https:\/\/codemyui.com\/tag\/login-form\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/05\/Login-Modal-With-Floating-Placeholder-And-Animated-Neon-Submit-Button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24782,"url":"https:\/\/codemyui.com\/mesmerizing-parallax-animated-info-card\/","url_meta":{"origin":13091,"position":3},"title":"Mesmerizing Parallax Animated Info Card","author":"Hima Vincent","date":"October 20, 2017","format":false,"excerpt":"This is really epic effect designed by Nathan Taylor, you have two info cards that shows an image, title and description, it will work great for blog archive pages and other such layouts. The cards transition with a mesmerizing parallax effect. If you are having trouble with the pen, try\u2026","rel":"","context":"In \"card ui\"","block_context":{"text":"card ui","link":"https:\/\/codemyui.com\/tag\/card-ui\/"},"img":{"alt_text":"Mesmerizing Parallax Animated Info Card","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Mesmerizing-Parallax-Animated-Info-Card.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\/Mesmerizing-Parallax-Animated-Info-Card.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Mesmerizing-Parallax-Animated-Info-Card.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/09\/Mesmerizing-Parallax-Animated-Info-Card.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28473,"url":"https:\/\/codemyui.com\/attention-grabbing-marquee-text-on-a-button\/","url_meta":{"origin":13091,"position":4},"title":"Attention-grabbing marquee text on a button","author":"Saijo George","date":"October 14, 2019","format":false,"excerpt":"This is a button that I came across on wickret.cuberto.com and thought there might be some landing pages where you want the visitors to notice the CTA button, it's a bit over the top but it can work in certain cases. The colours on the button are inverted on hover.\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Attention-grabbing marquee text on a button","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Attention-grabbing-marquee-text-on-a-button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Attention-grabbing-marquee-text-on-a-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Attention-grabbing-marquee-text-on-a-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Attention-grabbing-marquee-text-on-a-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15059,"url":"https:\/\/codemyui.com\/glitchy-button-radar-sweep-line-effect\/","url_meta":{"origin":13091,"position":5},"title":"Glitchy Button Radar Sweep Line Effect","author":"Hima Vincent","date":"April 19, 2017","format":false,"excerpt":"This is a button effect that shows a radar sweep line on button hover. This glitchy button effect was seen on vibeasy.com (warning: with auto-play sound when you open this link). If you are having trouble with the pen, try the archived copy on GitHub Glitchy Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Glitchy Button Radar Sweep Line Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/glitchy-button-radar-sweep-line-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/glitchy-button-radar-sweep-line-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/glitchy-button-radar-sweep-line-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/glitchy-button-radar-sweep-line-effect.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\/13091","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=13091"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13091\/revisions"}],"predecessor-version":[{"id":25890,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/13091\/revisions\/25890"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/13096"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=13091"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=13091"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=13091"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}