<!-- wp:greenshift-blocks/container {"id":"gsbp-887ef467-999e"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-887ef467-999e" id="gspb_container-id-gsbp-887ef467-999e"><!-- wp:greenshift-blocks/container {"id":"gsbp-290e4e4","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-290e4e4" id="gspb_container-id-gsbp-290e4e4"><!-- wp:greenshift-blocks/heading {"id":"gsbp-b906daf","headingTag":"div","headingContent":"GreenShift","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"7vw","fluidLineMax":"7rem","fluidSizeCustomValue":["clamp(3.2rem, 6.2vw, 6.5rem)"],"fluidLineCustomValue":["clamp(4.2rem, 6.2vw, 7rem)"],"customweight":"bold"},"animation":{"duration":700,"easing":"ease","type":"","usegsap":true,"clipInit":"polygon(0 0, 0 0, 0 100%, 0% 100%)","clipFinal":"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)","set_from":"to","triggerend":"+=200","triggerscrub":1,"triggerstart":"0"},"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["0px"],"left":["0px"]}},"Zindex":1}} -->
<div id="gspb_heading-id-gsbp-b906daf" class="gspb_heading gspb_heading-id-gsbp-b906daf " data-gsapinit="1" data-duration="0.7" data-clippath="polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" data-triggerstart="0" data-triggerend="+=200" data-triggerscrub="1">GreenShift</div>
<!-- /wp:greenshift-blocks/heading -->
<!-- wp:greenshift-blocks/heading {"id":"gsbp-c021f1f","headingTag":"div","headingContent":"GreenShift","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"7vw","fluidLineMax":"7rem","fluidSizeCustomValue":["clamp(3.2rem, 6.2vw, 6.5rem)"],"fluidLineCustomValue":["clamp(4.2rem, 6.2vw, 7rem)"],"customweight":"bold"},"csstransform":{"opacity":"0.13"}} -->
<div id="gspb_heading-id-gsbp-c021f1f" class="gspb_heading gspb_heading-id-gsbp-c021f1f ">GreenShift</div>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container -->
<!-- wp:greenshift-blocks/container {"id":"gsbp-6cd0907","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-6cd0907" id="gspb_container-id-gsbp-6cd0907"><!-- wp:greenshift-blocks/heading {"id":"gsbp-c2af425","headingTag":"div","headingContent":"is Page Builder","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"7vw","fluidLineMax":"7rem","fluidSizeCustomValue":["clamp(3.2rem, 6.2vw, 6.5rem)"],"fluidLineCustomValue":["clamp(4.2rem, 6.2vw, 7rem)"],"customweight":"bold"},"animation":{"duration":700,"easing":"ease","type":"","usegsap":true,"clipInit":"polygon(0 0, 0 0, 0 100%, 0% 100%)","clipFinal":"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)","set_from":"to","triggerend":"+=200","triggerscrub":1,"triggerstart":"100"},"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["0px"],"left":["0px"]}},"Zindex":1}} -->
<div id="gspb_heading-id-gsbp-c2af425" class="gspb_heading gspb_heading-id-gsbp-c2af425 " data-gsapinit="1" data-duration="0.7" data-clippath="polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" data-triggerstart="100" data-triggerend="+=200" data-triggerscrub="1">is Page Builder</div>
<!-- /wp:greenshift-blocks/heading -->
<!-- wp:greenshift-blocks/heading {"id":"gsbp-f54b257","headingTag":"div","headingContent":"is Page Builder","spacing":{"margin":{"values":{"top":[0],"bottom":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"useFluid":true,"fluidSizeMin":"3.2rem","fluidSizePerfect":"6.2vw","fluidSizeMax":"6.5rem","fluidLineMin":"4.2rem","fluidLinePerfect":"7vw","fluidLineMax":"7rem","fluidSizeCustomValue":["clamp(3.2rem, 6.2vw, 6.5rem)"],"fluidLineCustomValue":["clamp(4.2rem, 6.2vw, 7rem)"],"customweight":"bold"},"csstransform":{"opacity":"0.13"}} -->
<div id="gspb_heading-id-gsbp-f54b257" class="gspb_heading gspb_heading-id-gsbp-f54b257 ">is Page Builder</div>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph -->
<p>This effect is based on Clip path feature and option in the Animation container Block to add animations to CSS variables. It's described in details in this video</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-7d3bebfd-2a7f","src":"https://www.youtube.com/watch?v=YMUL9qjb7rs","provider":"youtube","poster":"https://i.ytimg.com/vi/YMUL9qjb7rs/maxresdefault.jpg","postDate":"2023-06-06T09:15:37+00:00"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-7d3bebfd-2a7f" id="gs-video-gsbp-7d3bebfd-2a7f"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=YMUL9qjb7rs" data-provider="youtube" data-autoplay="false" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="false" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe></div></div>
<!-- /wp:greenshift-blocks/video -->
<!-- wp:paragraph -->
<p> </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Tricky part of this effect is to add also background letters. For this, you need to place the same text layer twice. One will be animated, second will be as background, we leave it without animation and set opacity of layer as 10-20%. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>We also added on scroll interpolation. In our case, our effect is on top of page, so we must animate it once user start to scroll. So, we added 0 as start point and +=200 as end point of animation. For second layer we set 100 as a starting point. If your layer is not visible on page loading, then, you need to remove start point. In this way, the animation will start once layer will be visible on page</p>
<!-- /wp:paragraph -->
Letter Fill Effect
GreenShift
GreenShift
is Page Builder
is Page Builder
This effect is based on Clip path feature and option in the Animation container Block to add animations to CSS variables. It’s described in details in this video
Tricky part of this effect is to add also background letters. For this, you need to place the same text layer twice. One will be animated, second will be as background, we leave it without animation and set opacity of layer as 10-20%.
We also added on scroll interpolation. In our case, our effect is on top of page, so we must animate it once user start to scroll. So, we added 0 as start point and +=200 as end point of animation. For second layer we set 100 as a starting point. If your layer is not visible on page loading, then, you need to remove start point. In this way, the animation will start once layer will be visible on page
