GitHub<\/a><\/p>\n\nSee the Pen Before & After by Bryan Stoner (@mimoduo) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
This is a great code snippet that will help you show the before and after effects of adding the elements. Designed by Bryan Stoner. If you are having trouble with the pen, try the archived copy on GitHub<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":388,"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":[86175,192416248],"class_list":["post-29","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-before-and-after","tag-hover-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/05\/before-after.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29007,"url":"https:\/\/codemyui.com\/banner-ad-with-animated-clippath-slides\/","url_meta":{"origin":29,"position":0},"title":"Banner Ad with Animated Clippath Slides","author":"Saijo George","date":"November 27, 2019","format":false,"excerpt":"Here are multiple banner ad designs by Codepen user halvves. In here we have 2 variations for 300x250, 728x90, 160x600 and 320x50 ads where you have some nice slide transitions between images and text copy to deliver a powerful message. 300x250 Banner Variation A Snippet If you are having trouble\u2026","rel":"","context":"In \"ad template\"","block_context":{"text":"ad template","link":"https:\/\/codemyui.com\/tag\/ad-template\/"},"img":{"alt_text":"Banner Ad with Animated Clippath Slides","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.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\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Banner-Ad-with-Animated-Clippath-Slides.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":7582,"url":"https:\/\/codemyui.com\/laser-text-animation-css\/","url_meta":{"origin":29,"position":1},"title":"Laser Text Animation in CSS and Javascript","author":"Hima Vincent","date":"November 27, 2019","format":false,"excerpt":"JS Laser Text Engraving In this text animation by Martin Pitt, we have a really smooth text laser engraving effect using splitting.js If you are having trouble with the pen, try the archived copy on GitHub We judge ourselves by our intentions and\u00a0others by their\u00a0behaviourPablo Picasso Laser Engraving Text Animation\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"We judge ourselves by our intentions and\u00a0others by their\u00a0behaviour","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.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\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/We-judge-ourselves-by-our-intentions-and-others-by-their-behaviour.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28597,"url":"https:\/\/codemyui.com\/slide-in-from-right-open-from-center-and-dropdown-from-top-animation-for-html-table\/","url_meta":{"origin":29,"position":2},"title":"Slide-in from Right, Open from Center and Dropdown from Top Animation for HTML Table","author":"Saijo George","date":"October 23, 2019","format":false,"excerpt":"We have three microinteraction animations for HTML tables by Chris Smith. The three styles are: Slide-in from right animation Open from centre animation like opening a bookDropdown from top animation like a dropdown navigation These snippets use a bit of Javascript to get the animation and can be a great\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Slide-in from Right, Open from Center and Dropdown from Top Animation for HTML Table","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Slide-in-from-Right-Open-from-Center-and-Dropdown-from-Top-Animation-for-HTML-Table.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\/Slide-in-from-Right-Open-from-Center-and-Dropdown-from-Top-Animation-for-HTML-Table.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Slide-in-from-Right-Open-from-Center-and-Dropdown-from-Top-Animation-for-HTML-Table.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Slide-in-from-Right-Open-from-Center-and-Dropdown-from-Top-Animation-for-HTML-Table.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26661,"url":"https:\/\/codemyui.com\/marker-pen-effect-on-text-animation\/","url_meta":{"origin":29,"position":3},"title":"Marker Pen Effect On Text Animation","author":"Saijo George","date":"July 12, 2018","format":false,"excerpt":"Here is a bunch of CSS only hover animation mimicking the effect of highlighting text using a marker pen. If you are having trouble with the pen, try the archived copy on GitHub Marker Pen Animation Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Marker Pen Effect On Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-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\/07\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/Marker-Pen-Effect-On-Text-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28996,"url":"https:\/\/codemyui.com\/300x250-banner-ad-with-animated-slide-transition-to-js-countdown-timer\/","url_meta":{"origin":29,"position":4},"title":"Banner Ad with Animated Slide Transition to JS Countdown Timer","author":"Saijo George","date":"November 27, 2019","format":false,"excerpt":"Here is a banner ad design by Codepen user halvves. The banner has a 1st slide that transitions to a 2nd one where you have a countdown timer to an event and on hover, you get a CTA which says buy your tickets now. 300x250 Banner Ad Snippet If you\u2026","rel":"","context":"In \"ad template\"","block_context":{"text":"ad template","link":"https:\/\/codemyui.com\/tag\/ad-template\/"},"img":{"alt_text":"300x250 Banner Ad with Animated Slide Transition to JS Countdown Timer","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/300x250-Banner-Ad-with-Animated-Slide-Transition-to-JS-Countdown-Timer.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\/300x250-Banner-Ad-with-Animated-Slide-Transition-to-JS-Countdown-Timer.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/300x250-Banner-Ad-with-Animated-Slide-Transition-to-JS-Countdown-Timer.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/300x250-Banner-Ad-with-Animated-Slide-Transition-to-JS-Countdown-Timer.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":146,"url":"https:\/\/codemyui.com\/the-intern-trailer-text-animation\/","url_meta":{"origin":29,"position":5},"title":"The Intern Trailer Text Animation","author":"Hima Vincent","date":"October 7, 2015","format":false,"excerpt":"Do you want to recreate the awesome text animation from The Intern trailer have a look at this pen by\u00a0Balint Polgarfi. 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":"The Intern Trailer Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/the-intern-trailer-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/the-intern-trailer-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/the-intern-trailer-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/10\/the-intern-trailer-text-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\/29","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=29"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"predecessor-version":[{"id":26134,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/29\/revisions\/26134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/388"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}