{"id":4607,"date":"2017-02-08T00:44:45","date_gmt":"2017-02-07T14:44:45","guid":{"rendered":"http:\/\/codemyui.com\/?p=4607"},"modified":"2018-05-16T17:00:23","modified_gmt":"2018-05-16T07:00:23","slug":"3d-swinging-text-animation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/3d-swinging-text-animation\/","title":{"rendered":"3D Swinging Text Animation"},"content":{"rendered":"<p>Here we have a <a href=\"https:\/\/codemyui.com\/category\/text-animation\/\">text animation<\/a> designed by <a href=\"https:\/\/twitter.com\/johngarcia9110\" target=\"_blank\" rel=\"noopener\">John Garcia<\/a>.<br \/>\n In this snippet, we have a <a href=\"https:\/\/codemyui.com\/tag\/3d\/\">3d text<\/a> which moves left and right giving a sense of depth as it does that.<br \/>\n<!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/0919cde682402baf82d5094d3ff9bad4\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>3D Swinging Text Snippet<\/h2>\n<p class='codepen'  data-height='604' data-theme-id='0' data-slug-hash='NRQYPX' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen #codevember_01 by John Garcia (@johnbgarcia) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Here we have a text animation designed by John Garcia. In this snippet, we have a 3d text which moves left and right giving a sense of depth as it does that.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/3d-swinging-text-animation\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":4610,"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":[2131,1512930],"class_list":["post-4607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-3d","tag-text-animation","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/3d-swinging-text-animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25530,"url":"https:\/\/codemyui.com\/3d-text-animation-on-hover-2\/","url_meta":{"origin":4607,"position":0},"title":"3D Text Animation On Hover","author":"Hima Vincent","date":"June 17, 2021","format":false,"excerpt":"Designed by Dennis Garrn. If you are having trouble with the pen, try the archived copy on GitHub 3D Text Animation On Hover Snippet","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"3D Text AnimationA On Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-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\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/03\/3d-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15383,"url":"https:\/\/codemyui.com\/3d-drop-shadow-text-reveal-animation\/","url_meta":{"origin":4607,"position":1},"title":"3D Drop Shadow Text Reveal Animation","author":"Hima Vincent","date":"May 1, 2017","format":false,"excerpt":"A fancy text reveal animation effect in CSS designed by Luke Meyrick. When the page loads the text is revealed with a long drop shadow effect giving it a 3D effect. If you are having trouble with the pen, try the archived copy on GitHub 3D Shadow Text Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Drop Shadow Text Reveal Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-shadow-text-reveal-animation.gif?fit=880%2C400&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-shadow-text-reveal-animation.gif?fit=880%2C400&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-shadow-text-reveal-animation.gif?fit=880%2C400&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/3d-shadow-text-reveal-animation.gif?fit=880%2C400&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26687,"url":"https:\/\/codemyui.com\/3d-uppercase-text-with-shadow\/","url_meta":{"origin":4607,"position":2},"title":"3D Uppercase Text With Shadow","author":"Saijo George","date":"July 17, 2018","format":false,"excerpt":"A nice little text animation that features an awesome 3D text effect designed by Mandy Michael. If you are having trouble with the pen, try the archived copy on GitHub 3D Text with Shadow Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"3D Uppercase Text With Shadow","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.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\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/3D-Uppercase-Text-With-Shadow.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":17670,"url":"https:\/\/codemyui.com\/layers-shadow-3d-text-effect\/","url_meta":{"origin":4607,"position":3},"title":"Layers Shadow 3D Text Effect","author":"Hima Vincent","date":"June 8, 2017","format":false,"excerpt":"Here is a pure CSS based text effect designed by Twixes. You have the text with multiple layers giving it a 3D long shadow effect. If you are having trouble with the pen, try the archived copy on GitHub Layers Text Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Layers Shadow Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-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\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/layers-shadow-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":5682,"url":"https:\/\/codemyui.com\/folded-paper-text-effect\/","url_meta":{"origin":4607,"position":4},"title":"Folded Paper Text Effect","author":"Hima Vincent","date":"January 31, 2017","format":false,"excerpt":"This little snippet will allow you to add a 3D folded paper snake like text effect to your content. When you hover over the content the folds are removed and the text lays flat on the page. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"Folded Paper Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-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\/2017\/01\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/01\/folded-paper-text-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":14864,"url":"https:\/\/codemyui.com\/anaglyph-3d-red-blue-text-effect\/","url_meta":{"origin":4607,"position":5},"title":"Anaglyph 3D Red Blue Text Effect","author":"Hima Vincent","date":"April 10, 2017","format":false,"excerpt":"A simple text effect that gives the classic red and blue stereoscopic 3D text effect designed by Rich Duncan. If you are having trouble with the pen, try the archived copy on GitHub Stereoscopic 3D Text Effect Snippet","rel":"","context":"In \"3d\"","block_context":{"text":"3d","link":"https:\/\/codemyui.com\/tag\/3d\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/3d-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\/2017\/04\/3d-text-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/3d-text-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/04\/3d-text-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\/4607","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=4607"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4607\/revisions"}],"predecessor-version":[{"id":25940,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4607\/revisions\/25940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/4610"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=4607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=4607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=4607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}