GitHub<\/a><\/p>\n\nSee the Pen Flying letters by Mladen Stanojevic (@mladen___) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
Checkout this awesome text animation in which the letter that you type in the input box will fly away in the background. Designed by Mladen Stanojevic <\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":28881,"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":[13170349,1512930],"class_list":["post-78","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-input-field","tag-text-animation","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/11\/Flying-Letters-Text-Animation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29397,"url":"https:\/\/codemyui.com\/input-field-label-wave-animation-on-click\/","url_meta":{"origin":78,"position":0},"title":"Input Field Label Wave Animation on Click","author":"Saijo George","date":"February 6, 2020","format":false,"excerpt":"This is a nice HTML animation for the labels on input fields like text fields by Florin Pop. When you click on the input field the label which is shown as the default text, jump sup tot the top of the field in a smooth wave animation. If you are\u2026","rel":"","context":"In \"text field\"","block_context":{"text":"text field","link":"https:\/\/codemyui.com\/tag\/text-field\/"},"img":{"alt_text":"Input Field Label Wave Animation on Click","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Input-Field-Label-Wave-Animation-on-Click.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26770,"url":"https:\/\/codemyui.com\/confetti-flying-out-of-text\/","url_meta":{"origin":78,"position":1},"title":"Confetti Flying Out of Text","author":"Saijo George","date":"August 16, 2018","format":false,"excerpt":"A fancy text effect by Rachel Smith where you have confetti flying out of the text. If you are having trouble with the pen, try the archived copy on GitHub Confetti Flying Out of Text Snippet","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"Confetti Flying Out of Text","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Confetti-Flying-Out-of-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Confetti-Flying-Out-of-Text.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Confetti-Flying-Out-of-Text.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Confetti-Flying-Out-of-Text.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29355,"url":"https:\/\/codemyui.com\/movie-trailer-like-fly-in-and-fade-way-text-animation-in-pure-css\/","url_meta":{"origin":78,"position":2},"title":"Movie Trailer Like Fly In and Fade Way Text Animation in Pure CSS","author":"Saijo George","date":"January 31, 2020","format":false,"excerpt":"This is a really cool text animation in pure CSS that will look amazing on any site. It has this movie credit feel to it with the fly in and fade away 3D text effect. If you don't go after what you want, you'll never have it. If you don't\u2026","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"Movie Trailer Like Fly In and Fade Way Text Animation in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Movie-Trailer-Like-Fly-In-and-Fade-Way-Text-Animation-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Movie-Trailer-Like-Fly-In-and-Fade-Way-Text-Animation-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Movie-Trailer-Like-Fly-In-and-Fade-Way-Text-Animation-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Movie-Trailer-Like-Fly-In-and-Fade-Way-Text-Animation-in-Pure-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4244,"url":"https:\/\/codemyui.com\/wavy-text-bouncy-letter-animation\/","url_meta":{"origin":78,"position":3},"title":"Wavy Text With Bouncy Letter Animation","author":"Hima Vincent","date":"November 14, 2016","format":false,"excerpt":"This is a text animation designed by Raul Dronca, the text has a wavy animation and each individual characters has a bouncy effect with shadows and all. This will work well in any section where you want to add some really cool effect to a block of text. If you\u2026","rel":"","context":"In \"pure css\"","block_context":{"text":"pure css","link":"https:\/\/codemyui.com\/tag\/pure-css\/"},"img":{"alt_text":"Wavy Text With Bouncy Letter","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/wavy-text-with-bouncy-letter-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15520,"url":"https:\/\/codemyui.com\/multicolored-animated-letters-typing-effect\/","url_meta":{"origin":78,"position":4},"title":"Multicolored Animated Letters Typing Effect","author":"Hima Vincent","date":"May 4, 2017","format":false,"excerpt":"This is a cool typing text effect that is available in 2 version coloured and black\/white. It was designed by Steve Gardner. As you type in the letters are formed by smaller bits fusing together to form each caracter and the reverse of the effect is triggered when you hit\u2026","rel":"","context":"In \"text animation\"","block_context":{"text":"text animation","link":"https:\/\/codemyui.com\/tag\/text-animation\/"},"img":{"alt_text":"Multicolored Animated Letters Typing Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicolored-animated-letters-typing-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\/05\/multicolored-animated-letters-typing-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicolored-animated-letters-typing-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicolored-animated-letters-typing-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4446,"url":"https:\/\/codemyui.com\/slot-machine-text-animation\/","url_meta":{"origin":78,"position":5},"title":"Slot Machine Text Animation","author":"Hima Vincent","date":"November 23, 2016","format":false,"excerpt":"This is a text animation where you have a block of text in which each letter animates as if it's a slot machine and reveals a different block of text. This SVG code snippet is designed by Micha\u0142 Skowronek. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"SVG\"","block_context":{"text":"SVG","link":"https:\/\/codemyui.com\/tag\/svg\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/svg-motion.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/svg-motion.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/svg-motion.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/svg-motion.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\/78","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=78"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":28882,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/78\/revisions\/28882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/28881"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}