{"id":214,"date":"2015-07-19T11:51:58","date_gmt":"2015-07-19T11:51:58","guid":{"rendered":"http:\/\/codemyui.com\/2-column-animated-template\/"},"modified":"2018-05-17T12:59:24","modified_gmt":"2018-05-17T02:59:24","slug":"2-column-animated-template","status":"publish","type":"post","link":"https:\/\/codemyui.com\/2-column-animated-template\/","title":{"rendered":"2 Column Animated Template"},"content":{"rendered":"<p>A two column template with \u00a0animated blocks of content, inspired by dropbox.com\/guide.Designed by <a href=\"https:\/\/twitter.com\/romano_cla\" target=\"_blank\" rel=\"noopener\">Claudia Romano<\/a>.<\/p>\n<p><!--more--><\/p>\n<p>Check out the <a href=\"http:\/\/codyhouse.co\/demo\/2-blocks-template\/index.html\" target=\"_blank\" rel=\"noopener\">Demo<\/a> and <a href=\"http:\/\/codyhouse.co\/gem\/2-blocks-template\/\" target=\"_blank\" rel=\"noopener\">Tutorial<\/a> on CodyHouse<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A two column template with \u00a0animated blocks of content, inspired by dropbox.com\/guide.Designed by Claudia Romano.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/2-column-animated-template\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":1281,"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":[5780130,268522],"class_list":["post-214","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-hidden-content","tag-image-slider","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/07\/2-column-animated-template.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":190,"url":"https:\/\/codemyui.com\/a-squeezebox-portfolio-template\/","url_meta":{"origin":214,"position":0},"title":"A Squeezebox Portfolio Template","author":"Hima Vincent","date":"September 7, 2015","format":false,"excerpt":"A simple portfolio template with some motion effects. You can use this to show a list of projects you have worked on and on click it reveals more information about each of these projects. Designed by Claudia Romano Check out the tutorial and demo on Codyhouse","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"A Squeezebox Portfolio Template","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/a-squeezebox-portfolio-template.gif?fit=885%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/a-squeezebox-portfolio-template.gif?fit=885%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/a-squeezebox-portfolio-template.gif?fit=885%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2015\/09\/a-squeezebox-portfolio-template.gif?fit=885%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":5066,"url":"https:\/\/codemyui.com\/expanding-column-click-snippet\/","url_meta":{"origin":214,"position":1},"title":"Expanding Column on Click Snippet","author":"Hima Vincent","date":"January 5, 2017","format":false,"excerpt":"This is a vertical column layout that you can use in your next web design project. It was designed by Ettrics. The columns has a shimmering effect to it on hover and when you click on it, you will see that it opens up the hidden content in each column.\u2026","rel":"","context":"In \"accordion tabs\"","block_context":{"text":"accordion tabs","link":"https:\/\/codemyui.com\/tag\/accordion-tabs\/"},"img":{"alt_text":"Expanding Column on Click Snippet","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/expanding-column-on-click-snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/expanding-column-on-click-snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/expanding-column-on-click-snippet.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/expanding-column-on-click-snippet.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24834,"url":"https:\/\/codemyui.com\/2-column-split-screen-image-gallery-description-box\/","url_meta":{"origin":214,"position":2},"title":"2 Column Split Screen Image Gallery With Description Box","author":"Hima Vincent","date":"September 23, 2019","format":false,"excerpt":"A 2 column split screen image and cation gallery designed by Eduardo Bou\u00e7as. When you scroll each section loads a new content side by side. If you are having trouble with the pen, try the archived copy on GitHub Split Screen Image Gallery Snippet","rel":"","context":"In \"image gallery\"","block_context":{"text":"image gallery","link":"https:\/\/codemyui.com\/tag\/image-gallery\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.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\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/split-screen-gallery.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":24726,"url":"https:\/\/codemyui.com\/two-one-gsap-banner-ad\/","url_meta":{"origin":214,"position":3},"title":"Two in One GSAP Banner Ad","author":"Hima Vincent","date":"September 7, 2017","format":false,"excerpt":"A two in one ad template designed by Cody. The 300x600 banner has 2 section. When the user hovers over the top or bottom section the ad expands to show each section of the ad. If you are having trouble with the pen, try the archived copy on GitHub GSAP\u2026","rel":"","context":"In \"ad template\"","block_context":{"text":"ad template","link":"https:\/\/codemyui.com\/tag\/ad-template\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gsap-banner-ad.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gsap-banner-ad.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gsap-banner-ad.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/09\/gsap-banner-ad.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3325,"url":"https:\/\/codemyui.com\/column-image-gallery-click-expand\/","url_meta":{"origin":214,"position":4},"title":"Column Image Gallery with Click to Expand","author":"Hima Vincent","date":"October 25, 2016","format":false,"excerpt":"A pretty cool image gallery designed by Nikolay Talanov. There are five images in a column like layout, on hover you see the number overlayed on the image. When you click on it the image expands and takes the full width of 5 columns. This is a great animation for\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Column Image Gallery with Click to Expand","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/column-image-gallery-with-click-to-expand.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\/column-image-gallery-with-click-to-expand.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/column-image-gallery-with-click-to-expand.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/column-image-gallery-with-click-to-expand.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":214,"position":5},"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":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/214","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=214"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":26320,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/214\/revisions\/26320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/1281"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}