Advanced Heading Block

<!-- wp:paragraph -->
<p>Advanced heading is all in one tool for any kind of text. Think about it as flagship of typography on your site because it has mind blowing possibilities. Just want to show some of them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Example of animated heading. It has several styles of animations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Slide effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/row {"id":"gsbp-f56d3839-c572","align":"full","displayStyles":false,"background":{"backgroundState":"Gradient","gradient":"linear-gradient(135deg,rgb(0,140,222) 0%,rgb(122,4,212) 39%,rgb(155,81,224) 100%)"},"spacing":{"margin":{"values":{"top":[40]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[60],"bottom":[60]},"unit":["px","px","px","px"],"locked":false}}} -->
<div id="gspb_row-id-gsbp-f56d3839-c572" class="gspb_row gspb_row-id-gsbp-f56d3839-c572 wp-block-greenshift-blocks-row alignfull gspb_row-id-gsbp-f56d3839-c572"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-fc15b69e-5ef0"} -->
<div id="gspb_col-id-gsbp-fc15b69e-5ef0" class="gspb_row__col--12 wp-block-greenshift-blocks-row-column  gspb_col-id-gsbp-fc15b69e-5ef0"><!-- wp:greenshift-blocks/heading {"id":"gsbp-ef629266-25b1","animationtype":"slide","textbefore":"Animate your heading\u003cbr\u003e ","textafter":"","textpause":2.5,"textduration":0.7,"enableanimate":true,"reinit":true,"typography":{"alignment":["center"],"textShadow":{},"size":[50],"color":"#ffffff","line_height":[50]},"typographyanimated":{"textShadow":{},"color":"","colorState":"Gradient","gradient":"linear-gradient(95deg,rgb(60,184,255) 0%,rgb(134,229,255) 31%,rgb(255,215,94) 57%,rgb(255,153,29) 100%)","line_height":[60]}} -->
<h2 id="gspb_heading-id-gsbp-ef629266-25b1" class="gspb_heading gspb_heading-id-gsbp-ef629266-25b1 "><span class="text-anim text-anim--slide js-text-anim">Animate your heading<br> <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span></h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/row-column --> </div></div>
<!-- /wp:greenshift-blocks/row -->

<!-- wp:paragraph -->
<p>Push Effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-0d41c724-8e60","animationtype":"push","enableanimate":true,"typographyanimated":{"textShadow":{},"color":"#c90000"}} -->
<h2 id="gspb_heading-id-gsbp-0d41c724-8e60" class="gspb_heading gspb_heading-id-gsbp-0d41c724-8e60 "><span class="text-anim text-anim--push js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Loader Effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-bfa374b8-76f8","animationtype":"loader","enableanimate":true,"typographyanimated":{"textShadow":{},"color":"#df0000"}} -->
<h2 id="gspb_heading-id-gsbp-bfa374b8-76f8" class="gspb_heading gspb_heading-id-gsbp-bfa374b8-76f8 "><span class="text-anim text-anim--loader js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Rotate effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-5ebcdb91-def2","enableanimate":true,"typographyanimated":{"textShadow":{},"color":"#d50000"}} -->
<h2 id="gspb_heading-id-gsbp-5ebcdb91-def2" class="gspb_heading gspb_heading-id-gsbp-5ebcdb91-def2 "><span class="text-anim text-anim--rotate js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Zoom Effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-237fe66b-76d0","animationtype":"zoom","enableanimate":true,"typographyanimated":{"textShadow":{},"color":"#da0505"}} -->
<h2 id="gspb_heading-id-gsbp-237fe66b-76d0" class="gspb_heading gspb_heading-id-gsbp-237fe66b-76d0 "><span class="text-anim text-anim--zoom js-text-anim">Just because <span class="text-anim__wrapper js-text-anim__wrapper"><span class="text-anim__word js-text-anim__word text-anim__word--in">creativity</span><span class="text-anim__word js-text-anim__word ">imagination</span><span class="text-anim__word js-text-anim__word ">inspiration</span><span class="text-anim__word js-text-anim__word ">passion</span></span></span> in your mind</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Type Effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-b9c715c2-886c","animationtype":"typewriter","enableanimate":true,"typographyanimated":{"textShadow":{},"color":"#fc2424"}} -->
<h2 id="gspb_heading-id-gsbp-b9c715c2-886c" class="gspb_heading gspb_heading-id-gsbp-b9c715c2-886c "><span class="text-anim text-anim--typewriter js-text-typewriter">Just because <span class="gstypewrite" data-type="["creativity","imagination","inspiration","passion"]" data-period="500"></span></span> in your mind</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Also, you can add different additional elements to heading. For example, lines, borders, circles, etc</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-c7821350-fd59","headingTag":"div","headingContent":"I am heading with zigzag element","typography":{"alignment":["center"],"textShadow":{},"size":[25],"customweight":"bold"},"headingSeparator":true,"headingSepSpacing":{"margin":{"values":{"right":[15],"left":[15]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{"right":[15],"left":[15]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepVJustify":"center","headingSepPosition":"both","headingSepType":"zigzag","headingSepJustify":"center"} -->
<div class="gspb_heading_sep_gsbp-c7821350-fd59"><div class="gspb_heading_sep gspb_heading_sep_before"><svg width="88" height="11" viewBox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div><div id="gspb_heading-id-gsbp-c7821350-fd59" class="gspb_heading gspb_heading-id-gsbp-c7821350-fd59 ">I am heading with zigzag element</div><div class="gspb_heading_sep gspb_heading_sep_after"><svg width="88" height="11" viewBox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Good option is ability to add circles.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can configure also size, spacing, colors for each element</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-fc7e38eb-ea4d","headingTag":"div","headingContent":"I am heading with circle number","typography":{"alignment":["left"],"textShadow":{},"size":[25],"customweight":"bold"},"headingSeparator":true,"headingSepSpacing":{"margin":{"values":{"right":[15],"left":[15],"bottom":[-5]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{"right":[15],"left":[15]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepWidth":[40,null,null,null],"headingSepVJustify":"center","headingSepType":"circle","headingSepJustify":"center","numberCircle":"1"} -->
<div class="gspb_heading_sep_gsbp-fc7e38eb-ea4d"><div class="gspb_heading_sep gspb_heading_sep_before"><div class="gs-numhead__circle"><span>1</span></div></div><div id="gspb_heading-id-gsbp-fc7e38eb-ea4d" class="gspb_heading gspb_heading-id-gsbp-fc7e38eb-ea4d ">I am heading with circle number</div></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>You can also find the possibility to add dynamic highlight for Heading. If you have an <a href="https://greenshiftwp.com#animation">Animation addon</a>, you can also animate it</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-c5b8971e-85a7","headingContent":"Highlighted Heading block is here","typography":{"alignment":["center"]},"enablehighlight":true,"highlightanimate":true,"highlightsize":47,"highlightposition":83,"highlightspacing":16,"highlightcolor":"#ffb877ab"} -->
<h2 id="gspb_heading-id-gsbp-c5b8971e-85a7" class="gspb_heading gspb_heading-id-gsbp-c5b8971e-85a7 "><span class="gspb_heading_highlight gspb-inview">Highlighted Heading block is here</span></h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>And you can add custom or predefined animations for Heading Appearance</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-32ea4eda-a016","typography":{"alignment":["center"]},"animation":{"duration":700,"easing":"ease","type":"custom","y":30,"rx":60,"origin":"bottom center","o":"0"}} -->
<h2 id="gspb_heading-id-gsbp-32ea4eda-a016" class="gspb_heading gspb_heading-id-gsbp-32ea4eda-a016 " data-aos="custom" data-aos-easing="ease" data-aos-duration="700">GreenShift - Page-Building Gutenberg Blocks</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>You can change also shadows and even use up to 3 shadows in the same time to make 3d effects</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-6d9c716c-5efe","headingContent":"I am heading block with 3 shadows","typography":{"alignment":["center"],"textShadow":{"hShadow":"2","vShadow":"2","color":"#ffffff","hShadow2":"3","vShadow2":"3","blur2":"0","color2":"#7879ff","hShadow3":"6","vShadow3":"6","blur3":"5","color3":"#47373730","blur":"0"},"size":[38]},"enablesubTitle":false,"subTitle":"I am subtitle of heading block","typographysubTitle":{"textShadow":{},"customweight":"normal"}} -->
<h2 id="gspb_heading-id-gsbp-6d9c716c-5efe" class="gspb_heading gspb_heading-id-gsbp-6d9c716c-5efe ">I am heading block with 3 shadows</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Also you can add Cliping mask to your headings</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-83979744-24db","headingContent":"Image Mask","background":{"image":["https://greenshiftwp.com/wp-content/uploads/2022/04/slice3.webp"],"size":["contain"],"positionImage":[{"x":"0.56","y":"0.54"}]},"typography":{"textShadow":{},"size":[80],"alignment":["center"]},"enablemask":true} -->
<h2 id="gspb_heading-id-gsbp-83979744-24db" class="gspb_heading gspb_heading-id-gsbp-83979744-24db ">Image Mask</h2>
<!-- /wp:greenshift-blocks/heading -->