{"componentChunkName":"component---src-templates-post-js","path":"/pensieve/splitting-words","result":{"data":{"markdownRemark":{"html":"<p><a href=\"https://codepen.io/bhargavborse/pen/MWvxyov\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Codepen Demo</a></p>\n<h2>CSS [SCSS]</h2>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.splitting .char</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">animation</span><span class=\"token punctuation\">:</span> slide-in 1s <span class=\"token function\">cubic-bezier</span><span class=\"token punctuation\">(</span>.3<span class=\"token punctuation\">,</span> 0<span class=\"token punctuation\">,</span> .3<span class=\"token punctuation\">,</span> 1<span class=\"token punctuation\">)</span> both<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">animation-delay</span><span class=\"token punctuation\">:</span> <span class=\"token function\">calc</span><span class=\"token punctuation\">(</span>60ms * <span class=\"token function\">var</span><span class=\"token punctuation\">(</span>--char-index<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> <span class=\"token function\">saturate</span><span class=\"token punctuation\">(</span><span class=\"token function\">lighten</span><span class=\"token punctuation\">(</span>#182952<span class=\"token punctuation\">,</span> 55%<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> 60%<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token atrule\"><span class=\"token rule\">@keyframes</span> slide-in</span> <span class=\"token punctuation\">{</span> \n  <span class=\"token selector\">from</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">transform</span><span class=\"token punctuation\">:</span> <span class=\"token function\">translateY</span><span class=\"token punctuation\">(</span>1em<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token property\">opacity</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","frontmatter":{"title":"Splitting Words","description":"Splitting Words using CSS(SCSS)","date":"2021-04-21T00:00:00.000Z","slug":"/pensieve/splitting-words","tags":["Theming","CSS"]}}},"pageContext":{}},"staticQueryHashes":["1994492073","2681795072","3391063840","604461682"]}