{"id":126,"date":"2018-05-09T07:59:46","date_gmt":"2018-05-09T05:59:46","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/05\/09\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/"},"modified":"2020-06-18T07:39:43","modified_gmt":"2020-06-18T07:39:43","slug":"how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/","title":{"rendered":"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial"},"content":{"rendered":"<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"800\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif\"><figcaption class=\"wp-caption-text\">This is what you\u2019re going to learn today, pretty nice\u00a0eh?<\/figcaption><\/figure>\n<p>Hey guys! ? This is a small detour from <a href=\"https:\/\/medium.com\/sketch-app-sources\/morphing-svg-icons-with-keyshape-and-sketch-part-1-86d12e6dcbba\" target=\"_blank\" rel=\"noopener noreferrer\">this tutorial<\/a> that covered best practices for getting great morphing results for vector shapes. You can see this as a on-going series with the difference that I don\u2019t have a clear view on how many of these I will create. ???<\/p>\n<p>This one is even more hands-on. It\u2019s a step-by-step <strong>Medium-only<\/strong> GIF-powered tutorial on how to create smooth typographic animations.<\/p>\n<h3>What we are going to\u00a0create<\/h3>\n<p>You are going to create an animation with the word FUNKY with a beautiful free font called <a href=\"https:\/\/www.behance.net\/gallery\/49372905\/Funkturm-Free-font\" target=\"_blank\" rel=\"noopener noreferrer\">Funkturm<\/a>. The reason I\u2019ve choosen a very fat font is that you get a very fluid morphing effect that way. <em>(And in my head I thought using a thinner font would look like crap. I\u2019m probably totally wrong.)<\/em><\/p>\n<h3>You will\u00a0need<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.keyshapeapp.com\/download-trial\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Keyshape app<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/www.dropbox.com\/s\/d82lhzmycz5eac9\/Funkturm.zip?dl=0\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Funkturm font<\/strong><\/a><\/li>\n<\/ul>\n<figure>\n<p><img decoding=\"async\" data-width=\"1400\" data-height=\"875\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*CwQhgaKHpTcEsg_hMVVQCQ.png\"><br \/>\n<\/figure>\n<h3>Step 1. Create new\u00a0document<\/h3>\n<p>Create a new document (<strong>\u2318+N<\/strong>) in Keyshape. You can use one of the template sizes, no worries you can change all of this later. Actually it\u2019s always a good idea to trim your canvas as much as possible before exporting your end animation to code.<\/p>\n<h3>Step 2. Using the text\u00a0tool<\/h3>\n<p>Use the <strong>Text tool (T)<\/strong> to write the word \u201dFUNKY\u201d with capital letters using the font Funkturm. Of course you can write this with lowercase or another font. ?<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*qglyYJm9Go_9aPvWs3G9tA.gif\"><br \/>\n<\/figure>\n<h3>Step 3. Convert to path and break\u00a0apart<\/h3>\n<p>Next use the <strong>Selection tool (V)<\/strong> to select the word you just created. Go to<strong> Object\u2192Convert to Path<\/strong>. That converts each character to editable vector content. Next, select the newly created &lt;path&gt; and Go to<strong> Object\u2192Break Apart<\/strong>. That ungroups everything so that you can animate between each character. Make sure to name each &lt;path&gt; layer to something that makes more sense to you. For example \u201dF\u201d \u201dU\u201d \u201dN\u201d etc etc \u263a\ufe0f<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*fYKT7Bf29i4KZT0fJTBLAg.gif\"><br \/>\n<\/figure>\n<h3>Step 3.5. Fix those anchor\u00a0points<\/h3>\n<p>Make sure you have the anchor point of each character in the same place. Easiest (and I\u2019m lazy man) is to just use the <strong>Transform Tool (T) <\/strong>and just move it to the center position.<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*N815Y3VrijjYUrVZzYBVow.jpeg\"><br \/>\n<\/figure>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*cCheZym4r0Ef8xcd1ykCmw.gif\"><br \/>\n<\/figure>\n<h3>Step 4. Color code your\u00a0vectors<\/h3>\n<p>This is not mandatory just something I do to keep things more organized while animating. ?\u2b50\ufe0f <strong><em>Good to know:<\/em><\/strong><em> All of the shapes you paste into the first character will takeon that color.<\/em><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*MfjdVGe3qzI_DfN6Zqh0ew.gif\"><br \/>\n<\/figure>\n<h3>Step 5. Copy\u00a0shapes<\/h3>\n<p>Select the <strong>Node tool (A) <\/strong>and use it to select all of the nodes inside of the \u201dU\u201d character. Go to<strong> Edit\u2192Copy<\/strong><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*cF-MpONvT1Mc6cKGhC-pkA.gif\"><br \/>\n<\/figure>\n<h3>Step 6. Paste the \u201dU\u201d shape into the \u201dF\u201d\u00a0shape<\/h3>\n<p>First make sure the <strong>Auto-Keyframing button<\/strong> is pressed and in a red active state. Then move the timeline cursor out a bit, half a second (00:00.500 or 5 frames depending on your document settings) is good enough right now. Go to <strong>Edit\u2192Paste Shape<\/strong><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*PharPdo_BpzVssqe4bSmeg.gif\"><br \/>\n<\/figure>\n<p>? <strong>Note:<\/strong> I created a workflow where I call the layer that will contain all of the animation\/morphs to MorphStage. You can just ignore or just use it. It makes it easier for me to separate all of the layers\/states in a composition.<\/p>\n<h3>Step 7. Align the morphed characters<\/h3>\n<p>What happens if you start animating right away like I did is that when morphed the character will of course move to the place in X and Y space where it was when copied. A very quick and easy fix is to: 1. Make sure the Auto-Keyframing button is <strong>turned off<\/strong>. 2. Select the morphed \u201dU\u201d with the Node tool (A) and move it to where you want it to be, maybe left aligned onto the \u201dF\u201d?<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*hd_BVYKIIm8xb3bP9WY_ZA.gif\"><br \/>\n<\/figure>\n<h3>Step 8. Create manual rulers\/guides<\/h3>\n<p>By now you may have understood that a ruler line would be nice eh? ? Since rulers\/guides don\u2019t work in Keyshape as I want them to (like in Sketch) you will need to create your own. Easy as pie just use the <strong>Line Tool (L).<\/strong><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*OyOwtraAnZtMBfbQNIcFuQ.gif\"><br \/>\n<\/figure>\n<p>? <strong>Note:<\/strong> I asked the developer of Keyshape <strong>Pixofield<\/strong> if something like this would be included in a future update and guess what? Guides are coming!<\/p>\n<h3>Step 9. Experiment with Set Start\u00a0Node<\/h3>\n<p>As explained in my last morphing tutorial one of the key things to get amazing morphing animations is to experiment with the position of the start node of each shape. If you\u2019re getting wonky results it\u2019s probably a good idea to play around with it. Just use the <strong>Node Tool (A) <\/strong>and select the shape and a very subtle bluish triangle will appear on one of the nodes.<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*h5cqH29Wn7_a0v2lnYFFUQ.gif\"><br \/>\n<\/figure>\n<h3>Step 10. Repeat repeat repeat!\u00a0?<\/h3>\n<p>As all things by repeating them many many times we get better and better. Feel free to leave me a comment on what was great and what was not so great, all feedback is appreciated. ??\u200d??<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"500\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*KHSzynnrK2rndd-NWS1rIA.gif\"><br \/>\n<\/figure>\n<h3>Step 11. Final\u00a0results<\/h3>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"483\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*zfTECwGZG6Cyy35Cs-Cawg.gif\"><figcaption class=\"wp-caption-text\">I added a colored background to the canvas and color to the composition background as\u00a0well<\/figcaption><\/figure>\n<h3>Download tutorial\u00a0assets<\/h3>\n<p>GIFs are cool and all but to really see what\u2019s going on you probably want to download the HD\u00a0.mov versions of them. Plus you get the final version of the Keyshape project file as well to play around with.<\/p>\n<p>Also here\u2019s how the animation looks on my <a href=\"https:\/\/codepen.io\/designforventures\/pen\/bMxboQ\" target=\"_blank\" rel=\"noopener noreferrer\">Codepen<\/a> with some small additions like the gradient background. I\u2019ll be doing a Keyshape \u2192Codepen tutorial in the future, stay tuned.<\/p>\n<h4><a href=\"https:\/\/drive.google.com\/open?id=1OabKHTqydJKEU6ZkbguB8FpMr3M8MHSG\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Download the assets\u00a0here<\/strong><\/a><\/h4>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"400\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*b97dKWwy9UuiMVejU2qflA@2x.png\"><br \/>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This is what you\u2019re going to learn today, pretty nice\u00a0eh? Hey guys! ? This is a small detour from this tutorial that covered best practices for getting great morphing results for vector shapes. You can see this as a on-going series with the difference that I don\u2019t have a clear view on how many of&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[4,27,8,11,9],"class_list":["post-126","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-animation","tag-keyshape","tag-svg","tag-svg-animation","tag-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"This is what you\u2019re going to learn today, pretty nice\u00a0eh? Hey guys! ? This is a small detour from this tutorial that covered best practices for getting great morphing results for vector shapes. You can see this as a on-going series with the difference that I don\u2019t have a clear view on how many of&hellip;&nbsp;Read More &raquo;How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-09T05:59:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:39:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial\",\"datePublished\":\"2018-05-09T05:59:46+00:00\",\"dateModified\":\"2020-06-18T07:39:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\"},\"wordCount\":898,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif\",\"keywords\":[\"Animation\",\"Keyshape\",\"SVG\",\"Svg Animation\",\"Tutorial\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\",\"name\":\"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif\",\"datePublished\":\"2018-05-09T05:59:46+00:00\",\"dateModified\":\"2020-06-18T07:39:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial - Sketch2React Blog","og_description":"This is what you\u2019re going to learn today, pretty nice\u00a0eh? Hey guys! ? This is a small detour from this tutorial that covered best practices for getting great morphing results for vector shapes. You can see this as a on-going series with the difference that I don\u2019t have a clear view on how many of&hellip;&nbsp;Read More &raquo;How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial","og_url":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-05-09T05:59:46+00:00","article_modified_time":"2020-06-18T07:39:43+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial","datePublished":"2018-05-09T05:59:46+00:00","dateModified":"2020-06-18T07:39:43+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/"},"wordCount":898,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif","keywords":["Animation","Keyshape","SVG","Svg Animation","Tutorial"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/","url":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/","name":"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif","datePublished":"2018-05-09T05:59:46+00:00","dateModified":"2020-06-18T07:39:43+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/800\/1*lkvfh4jGgye2hmeAKgi7rQ.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/how-to-create-smooth-typographic-animations-with-code-step-by-step-gif-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create smooth typographic animations {with code} \u2014 Step by step GIF tutorial"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=126"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/126\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/126\/revisions\/350"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}