{"id":53744,"date":"2019-04-15T10:18:21","date_gmt":"2019-04-15T07:18:21","guid":{"rendered":"https:\/\/newblog.creatopy.com\/blog\/?p=53744"},"modified":"2023-07-24T14:15:58","modified_gmt":"2023-07-24T11:15:58","slug":"kinetic-typography","status":"publish","type":"post","link":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/kinetic-typography\/","title":{"rendered":"20 Examples Of Cool Kinetic Typography"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Typography animations have been extremely popular for many years, and we can see them everywhere from movie openings to tv commercials. They have also been widely adopted by web designers and used massively in website design and display banner design.\u00a0<\/span><\/p>\n<p><!--more--><\/p>\n<p>The reason why kinetic type is so loved by designers is that it provides endless creative possibilities, it\u2019s eye-catching and it can convey powerful messages.<span style=\"font-weight: 400;\"><a href=\"https:\/\/app.creatopy.com\/auth\/create-account?internal_source=internal&amp;internal_medium=Blog&amp;internal_campaign=BlogContentCTA\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-70331 size-full aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png\" alt=\"\" width=\"700\" height=\"90\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png 700w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-600x77.png 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-150x19.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/span><\/p>\n<h2><b>What is animated typography?<\/b><\/h2>\n<p>Kinetic typography or animated typography, refers to any kind of moving text, be that text that moves slowly, expands, shrinks, or morphs into something else. Animated letters are way more attractive than static text.<\/p>\n<p><a href=\"https:\/\/newblog.creatopy.com\/blog\/text-animation-in-online-banners\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\"><strong>Text animations<\/strong><\/span><\/a><span style=\"font-weight: 400;\"> are used to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> Emphasize the meaning of a text and<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> To convey an emotion-filled message. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It also has the potential to catch a viewer\u2019s attention and impact him in a big way. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">And now, I invite you to go through a selection of cool typography animations. Each of them is a great opportunity for you to learn some new techniques and discover amazing creative ideas. Some of them might dazzle you! <\/span><\/p>\n<h2><b>10 examples of amazing animated typography<\/b><\/h2>\n<hr \/>\n<p><b>1. Morphing <span style=\"font-weight: 400;\">is one of the most used techniques in kinetic typography to create motion typography. It is simple and eye-catching. Besides, it can help designers promote an important message or make a statement. <\/span><\/b><\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"size-full wp-image-53747 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/thin-to-fat-typography-animation.gif\" alt=\"kinetic typography\" width=\"800\" height=\"600\" \/><a href=\"https:\/\/dribbble.com\/holke79\" target=\"_blank\" rel=\"noopener\">Artist: Holke79\u00a0<\/a><\/p>\n<hr \/>\n<p><b>2. Flickering <\/b><span style=\"font-weight: 400;\">text, on the contrary, is not something you\u2019ll find very often. One really needs to have a flair for picking words in order to use flickering as animated text. Not many words out there work as well with this technique, as \u201cwhere\u201d and \u201chere\u201d do.<\/span><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-53761 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/where-typography-animations.gif\" alt=\"kinetic typography\" width=\"800\" height=\"600\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/dribbble.com\/chris_on_the_motion\" target=\"_blank\" rel=\"noopener\">Artist: Christos Baltaszis\u00a0<\/a><\/p>\n<hr \/>\n<p><b>3.Hypnotizing text <\/b><span style=\"font-weight: 400;\">will never go unnoticed. It\u2019s meant to stand out and impress. And mesmerize.<\/span><\/p>\n<figure class=\"wp-block-video\"><video src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/hypnotizing-text.mp4\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"350\" height=\"263\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/video><\/figure>\n<p style=\"text-align: center;\"><a href=\"https:\/\/dribbble.com\/zezierlich\" target=\"_blank\" rel=\"noopener\">Artist: Cecilia Erlich\u00a0<\/a><\/p>\n<hr \/>\n<p><b>4.Moving text,<\/b><span style=\"font-weight: 400;\"> either it\u2019s from right to left or up to down, is spectacular also, especially when the technique is paired with appropriate words. As you see in this example, this animation effect was used to emphasize the meaning of the words and surprise the viewer. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53764 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/fall-rise-typography-animations.gif\" alt=\"kinetic typography\" width=\"1000\" height=\"1000\" \/><\/p>\n<p style=\"text-align: center;\">Artist: <a href=\"https:\/\/www.behance.net\/syddharth\" target=\"_blank\" rel=\"noopener\">Siddhart Mate<\/a><\/p>\n<hr \/>\n<p><b>5. Drawing the text letter by letter<\/b><span style=\"font-weight: 400;\"> is not something new, but it all depends on how you do it, what fonts you use and other complementary graphic elements. This example shows just how creative one can get with a simple message like \u201csilence of a forest\u201d. On the one hand, the artist used this foresty green, on the other, it made the word \u201cforest\u201d actually look like a pine forest! And not to mention the subtle little leaf falling on top of \u201ci\u201d! <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53766 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/forest-animated-typography.gif\" alt=\"kinetic typography\" width=\"568\" height=\"439\" \/><\/p>\n<p style=\"text-align: center;\">Artist: <a href=\"https:\/\/www.behance.net\/lettersbychesca\" target=\"_blank\" rel=\"noopener\">Chesca Acpal\u00a0<\/a><\/p>\n<hr \/>\n<p><b>6.Geometric constructions <\/b><span style=\"font-weight: 400;\">are the new sensation of animated typography. This type animation technique is modern and cool and it can help creatives promote a tech or urban brand like no other. \u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53767 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/BasicSpace-animated-typeface.gif\" alt=\"animated typography\" width=\"960\" height=\"540\" \/><\/p>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/animography.net\/collections\/typefaces\" target=\"_blank\" rel=\"noopener\">Animography<\/a><\/p>\n<hr \/>\n<p><b>7.Fluid geometry <\/b><span style=\"font-weight: 400;\">is a new kind of typography animation technique and it\u2019s splendid! It has an urban air and a fluid dynamism. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53771 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/Gilbert_Animated-typography.gif\" alt=\"animated typography\" width=\"960\" height=\"540\" \/><\/p>\n<p style=\"text-align: center;\">Source:<a href=\"https:\/\/animography.net\/collections\/typefaces\" target=\"_blank\" rel=\"noopener\"> Animography\u00a0<\/a><\/p>\n<hr \/>\n<p><span style=\"font-weight: 400;\">8. You may have never heard of <\/span><b>texture constructions<\/b><span style=\"font-weight: 400;\">, but they do exist. Here\u2019s the proof: <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This animation technique constructs the layers and texture of letters simultaneously for a truly artistic effect. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53772 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/Moshun_Animate-typeface.gif\" alt=\"animated typography\" width=\"960\" height=\"540\" \/><\/p>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/animography.net\/collections\/typefaces\" target=\"_blank\" rel=\"noopener\">Animography\u00a0<\/a><\/p>\n<hr \/>\n<p><b>9. Complex morphing<\/b><span style=\"font-weight: 400;\"> is another way to get attention to your message. I love how these symbols of London create the name of the city. You can even recognize each individual building! <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53773 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/london-animated-typography.gif\" alt=\"animated typography\" width=\"800\" height=\"600\" \/><\/p>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/giphy.com\/gifs\/illustration-animated-gif-1RDiZNlUerlkc\" target=\"_blank\" rel=\"noopener\">Giphy\u00a0<\/a><\/p>\n<hr \/>\n<ol start=\"10\">\n<li><b>Graphic animations<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> include the presence of graphics and illustrations. This is a more complex type of animated text but it is totally worth it.<br \/>\n<\/span><\/span><\/p>\n<figure class=\"wp-block-video\"><video src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/we-are-made-of-stories-animated-typography.mp4\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"500\" height=\"707\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/video><\/figure>\n<\/li>\n<\/ol>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/giphy.com\/gifs\/typography-motion-graphics-animated-lettering-7xAjgskTV36KI\" target=\"_blank\" rel=\"noopener\">Giphy<\/a><span style=\"font-weight: 400;\"><a href=\"https:\/\/app.creatopy.com\/auth\/create-account?internal_source=internal&amp;internal_medium=Blog&amp;internal_campaign=BlogContentCTA\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-70331 size-full aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png\" alt=\"\" width=\"700\" height=\"90\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png 700w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-600x77.png 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-150x19.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/span><\/p>\n<hr \/>\n<p><span style=\"font-weight: 400;\">11. The <\/span><b>dynamic montage<\/b><span style=\"font-weight: 400;\"> of text can tell a story, even when there are no images at all. Pause for a moment and take a look at the example below to understand how timing, pause and the abrupt apparition of text can create thrill and a storyline.<\/span><\/p>\n<figure class=\"wp-block-video\"><video src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/political-instability-kinetic-typography.mp4\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"640\" height=\"360\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/video><\/figure>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/www.contentcreatures.com\" target=\"_blank\" rel=\"noopener\">Contentcreatures<\/a><\/p>\n<hr \/>\n<p><b>12. Neon flickering<\/b><span style=\"font-weight: 400;\"> is used quite frequently in ads for pubs and bars. The effect is extremely easy to create and it guarantees your message will get noticed.<\/span><\/p>\n<figure class=\"wp-block-video\"><video src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/DreamOn-kinetic-typography.mp4\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"100%\" height=\"100%\"><\/video><\/figure>\n<p style=\"text-align: center;\">Artist: <a href=\"https:\/\/www.margaretfu.com\" target=\"_blank\" rel=\"noopener\">Margaret Fu\u00a0<\/a><\/p>\n<hr \/>\n<p><b>13. Dash typography<\/b><span style=\"font-weight: 400;\"> is modern and simple and it can introduce a message in an elegant way. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53781 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/5htD.gif\" alt=\"animated typography\" width=\"500\" height=\"250\" \/><\/p>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/gifer.com\/en\/5htD\" target=\"_blank\" rel=\"noopener\">Gifer\u00a0<\/a><\/p>\n<hr \/>\n<p><b>14. Creative letters <\/b><span style=\"font-weight: 400;\">can take everyone by surprise. Just look at this flying bat W. The bat is totally a Halloween trademark, so the association between the two comes naturally. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-53782\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/halloween.gif\" alt=\"kinetic typography\" width=\"1400\" height=\"864\" \/><\/p>\n<p style=\"text-align: center;\">Source: <a href=\"https:\/\/digitalsynopsis.com\/design\/type-in-motion-typography-animation\/\" target=\"_blank\" rel=\"noopener\">Digital Synopsis\u00a0<\/a><\/p>\n<hr \/>\n<p><b>15. Illustrated letters <\/b><span style=\"font-weight: 400;\">that form a word have been around for many years, but they\u2019re still catchy and surprising. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53784 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/professions.gif\" alt=\"\" width=\"800\" height=\"600\" \/><\/p>\n<p style=\"text-align: center;\">Source:<a href=\"https:\/\/hackernoon.com\/kinetic-typography-quickstart-guide-for-devs-designers-d5c6b5545ade\" target=\"_blank\" rel=\"noopener\"> Hackernoon\u00a0<\/a><\/p>\n<hr \/>\n<p><span style=\"font-weight: 400;\">16. The <\/span><b>scrabble effect typography animation <\/b><span style=\"font-weight: 400;\">can help you create your message in a dynamic and surprising way. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53785 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/relocate-kinetic-typography.gif\" alt=\"kinetic typography\" width=\"800\" height=\"600\" \/><\/p>\n<p style=\"text-align: center;\">Artist: <a href=\"https:\/\/dribbble.com\/zakharyak\" target=\"_blank\" rel=\"noopener\">Maxym Zacharyack\u00a0<\/a><\/p>\n<hr \/>\n<p><b>17. Morphing geometric shapes<\/b><span style=\"font-weight: 400;\"> can emphasize your story and create a unique atmosphere. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53786 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/robot-kinetic-typography.gif\" alt=\"kinetic typography\" width=\"800\" height=\"600\" \/><\/p>\n<p style=\"text-align: center;\">Source: MVDC Project<\/p>\n<hr \/>\n<p><b>18. Creative animated letters in static words<\/b><span style=\"font-weight: 400;\">, that\u2019s something no one expects. This combination of static and animated letters is really interesting because you can focus your message on one letter only. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-53787 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/chess-kinetic-typography.gif\" alt=\"kinetic typography\" width=\"1400\" height=\"865\" \/><\/p>\n<p style=\"text-align: center;\">Artist: <a href=\"https:\/\/www.behance.net\/MindaugasDudenas\" target=\"_blank\" rel=\"noopener\">Mindaugas Dudenas\u00a0<\/a><\/p>\n<hr \/>\n<p><b>19. Accelerated typography animation <\/b><span style=\"font-weight: 400;\">are used to create a dazzling visual effect and to convey a quick story. As we can see in this example, this animation talks about how many tequila shots someone drank. Makes you a bit dizzy. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-53789 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/one-tequilla.gif\" alt=\"kinetic typography\" width=\"500\" height=\"300\" \/><\/p>\n<p style=\"text-align: center;\">Source: Giphy<\/p>\n<hr \/>\n<p><b>20. Emotion-filled animated letters. <\/b><span style=\"font-weight: 400;\">This isn\u2019t quite an animation effect, but rather a creative technique. This shaking \u201ci\u201d conveys so much emotion, we can almost empathize with it! <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-53790 aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/afraid-kinetic-typography.gif\" alt=\"animated typography\" width=\"800\" height=\"600\" \/><\/p>\n<p style=\"text-align: center;\">Artist: <a href=\"https:\/\/dribbble.com\/vladopa\" target=\"_blank\" rel=\"noopener\">Vlado Paunovic<\/a><\/p>\n<hr \/>\n<h2><b>How to create your own cool typography animations<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Eager to try and create a cool typography animation? In Creatopy you can create one in just a few minutes. Here\u2019s one I created in about 5 minutes:<\/span><\/p>\n<figure class=\"wp-block-video\"><video src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/typography-animations.mp4\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"100%\" height=\"100%\"><\/video><\/figure>\n<p><span style=\"font-weight: 400;\">Curious? If you want to create a kinetic typography visual right now in Creatopy, <\/span><a href=\"https:\/\/app.creatopy.com\/auth\/login\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">sign in to your account<\/span><\/a><span style=\"font-weight: 400;\"> (or sign up for free) and follow these steps: \u00a0\u00a0<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Go to <\/span><em>Create<\/em> <span style=\"font-weight: 400;\">and click the button, or simply select your desired size from the search tab.<\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65652 size-large\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-1024x524.jpg\" alt=\"select your design format\" width=\"1024\" height=\"524\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-1024x524.jpg 1024w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-600x307.jpg 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-150x77.jpg 150w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-768x393.jpg 768w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-1536x786.jpg 1536w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-20x10.jpg 20w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design-80x40.jpg 80w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-new-design.jpg 1822w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ol start=\"2\">\n<li><span style=\"font-weight: 400;\">Select a background for your visual. It can either be a color, texture, pattern, or stock photo, already available in Creatopy. <\/span><span style=\"font-weight: 400;\">Or you can upload a picture of your own. I\u2019ll illustrate the process using the blue background I choose for my visual. <\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65660 size-large\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-1024x498.jpg\" alt=\"choose a background for your design\" width=\"1024\" height=\"498\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-1024x498.jpg 1024w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-600x292.jpg 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-150x73.jpg 150w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-768x374.jpg 768w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-1536x747.jpg 1536w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-20x10.jpg 20w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background-80x40.jpg 80w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-blue-background.jpg 1906w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ol start=\"2\">\n<li><span style=\"font-weight: 400;\"> Then, add your <\/span>text<b>.<\/b><span style=\"font-weight: 400;\"> Go to the menu on the left-hand side and click the <\/span><em>Text tab<\/em><span style=\"font-weight: 400;\">. Select one of the available text sizes available, or choose a predefined typography template and just replace the existing text with your own.<\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65661 size-large\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-1024x531.jpg\" alt=\"click on the text button\" width=\"1024\" height=\"531\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-1024x531.jpg 1024w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-600x311.jpg 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-150x78.jpg 150w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-768x398.jpg 768w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-1536x796.jpg 1536w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-20x10.jpg 20w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-30x17.jpg 30w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-75x40.jpg 75w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text-80x40.jpg 80w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_typography_animations_in_creatopy-_-_how_to_add_text.jpg 1651w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here is the typography preset I choose. It is standard static, but you can easily animate it. I\u2019ll show you how.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65662 size-large\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-1024x528.jpg\" alt=\"choose the text format\" width=\"1024\" height=\"528\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-1024x528.jpg 1024w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-600x309.jpg 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-150x77.jpg 150w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-768x396.jpg 768w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-1536x791.jpg 1536w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-20x10.jpg 20w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-75x40.jpg 75w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format-80x40.jpg 80w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create-kinetic-typography-choose-the-text-format.jpg 1671w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ol start=\"4\">\n<li style=\"list-style-type: none;\">\n<ol start=\"4\">\n<li><span style=\"font-weight: 400;\"> You can create a quick animated effect using our <\/span>Magic Animator tool<span style=\"font-weight: 400;\"> that\u2019s on the menu bar, last on the list. However, if you want to create a surprising and more eye-catching effect, you\u2019ll have to customize each of your words using the <\/span><b>Timeline view<\/b><span style=\"font-weight: 400;\">. <\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Click the <em>Timeline<\/em> button, to enable the Timeline view so you can see all of your elements nicely layered and organized. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then, click on each tiny box at the beginning of each text layer and you\u2019ll see a pop-up menu of the built-in animations available. Try each of them out to see which one works best with your text and then set the duration of the animation effect by simply dragging the right margins of the box to the right.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65663 size-large\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-1024x463.jpg\" alt=\"select the animation for your text\" width=\"1024\" height=\"463\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-1024x463.jpg 1024w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-600x271.jpg 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-150x68.jpg 150w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-768x347.jpg 768w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-1536x695.jpg 1536w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text-20x10.jpg 20w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy_-_how_to_animate_your_text.jpg 1912w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Repeat this action for each of the words in your visual.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For a continuous animated effect, change the looping setting from <em>once<\/em> to <em>forever<\/em> or to as many times as you\u2019d like the animation to play.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> Then, hit the <em>Play<\/em> button which is on top of the dashboard to check on your work.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65664 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/preview-your-work-1.gif\" alt=\"click on the play button and preview your work\" width=\"1904\" height=\"929\" \/><\/p>\n<ol start=\"5\">\n<li><span style=\"font-weight: 400;\"> Now that you\u2019ve finished animating your text, you can download your work in HTML, AMP, MP4, and GIF format.\u00a0<\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-65659 size-large\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types-1024x689.jpg\" alt=\"download your work in one of the available formats\" width=\"1024\" height=\"689\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types-1024x689.jpg 1024w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types-600x403.jpg 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types-150x101.jpg 150w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types-768x516.jpg 768w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types-18x13.jpg 18w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2019\/04\/create_kinetic_typography_in_creatopy-_-_animated_file_types.jpg 1383w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">That\u2019s it! Nice and easy. <\/span><\/p>\n<hr \/>\n<h2><b>Make your words come to life with motion typography!<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Now you know more about typography animations and hopefully, you feel more confident to start your animated typography project. Whether you\u2019re trying to create an advertising visual or a DIY promotional material for your blog, Creatopy can help you to design impressively animated texts in minutes!<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>Illustration by\u00a0<a href=\"https:\/\/www.behance.net\/anitamolnar\" target=\"_blank\" rel=\"noopener\">Anita Molnar\u00a0<\/a><span style=\"font-weight: 400;\"><a href=\"https:\/\/app.creatopy.com\/auth\/create-account?internal_source=internal&amp;internal_medium=Blog&amp;internal_campaign=BlogContentCTA\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-70331 size-full aligncenter\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png\" alt=\"\" width=\"700\" height=\"90\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png 700w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-600x77.png 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-150x19.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Typography animations have been extremely popular for many years, and we can see them everywhere from movie openings to tv commercials. They have also been widely adopted by web designers and used massively in website design and display banner design.\u00a0 The reason why kinetic type is so loved by designers<\/p>\n","protected":false},"author":181,"featured_media":53746,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3995,3996],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts\/53744"}],"collection":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/users\/181"}],"replies":[{"embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/comments?post=53744"}],"version-history":[{"count":22,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts\/53744\/revisions"}],"predecessor-version":[{"id":82188,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts\/53744\/revisions\/82188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/media\/53746"}],"wp:attachment":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/media?parent=53744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/categories?post=53744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/tags?post=53744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}