Animation Container - Greenshift

Blog Staff
May 14, 2022
This block is all in one solution to build any kind of animations, from simple transforms to SVG morps and animations by path and it’s based on premium version of GSAP library. Let me show some usage of this block and in-depth tutorial in video.
This block is working as container, you can place any other block inside and animate it. Block has several types of usage:
Transformation Animations

Transform is most common case for animation. Transformation is available in two way: in Animation container block and also in Animation section in all Greenshift blocks
Animation section for all blocks
When you use Animation section inside block, our special light version of animation library is used. So, if your purpose is to add simple reveals like this
I am simple transform animation
Then, it’s better to use Animation section under each block instead of Animation container.
Animation container block

Animation Container Block is more advanced block to add different kind of animation to any element. First of all, you can simply wrap any block with animation container and even add animation chains. Just click on icon for any block and select to transform to Animation Container
Multiple chained Animation

Animation container has all possibilities of Animation section but much more triggers and types. For example, you can create animation chains when you add different animations step by step or even in parallel mode with different easing and interpolations
Scroll interpolation

Another useful option for animation container is the possibility to interpolate animation on scroll.
SCROLL
You can control distance for interpolation, speed, trigger position, or even assign another block or trigger.
Custom object for animation and trigger

For example, here I enabled Hover trigger animation on button + Multiple animation chain, but I applied this chain not to object itself, but on other icon blocks which I placed under main icon and connected them via custom object option. You can make these connections without limits. For example, you can use one block to control the animation of another block
Pin Scroll combination

Another useful option for Animation container is possibility to combine it with Pin Scroll block with pin effect which is quite popular nowadays.
THE PIN
Custom origin

You can make custom origin point for animation. This is useful when you make 3d transformation (when you change rotate X, rotate Y or Z transform)
Global Animation Parameters

There are few global parameters which you can change for all animations.
For example, ease type
SVG animations

SVG is vector format of graphic. It has one big advantage over regular images – it can be scalable without losing details. Also, SVG is like code of image and we can animate many parameters of this code.
SVG draw

This type is one of possible type of animations. It allows to make draw effect of any svg which has stroke parameter. Greenshift plugin also has many ready svg shapes in SVG shape block and you can enable animate option in them.
Example of draw effect
SVG Path

This type allows to move some object on svg path. You can use svg image as path object or simply place svg coordinates of path. You can use absolute position of object (it will use path as motion, but keep own position) or you can align object directly to path and it’s turns.
SVG Morph

This allows to make smooth morph from one svg to another. Any kind of SVG is allowed and also you can put custom code.
If you use ID of SVG instead coordinates, make sure that id parameter is added to path and not to SVG itself
SVG Masks

You can use svg draw effect with Blend option
https://twitter.com/GreenshiftWP/status/1560325155200684034?s=20&t=LYHXerm5rK8mdYrSPZ7rCA
Text animations

Next type of animations for animation container is Text animations. You can add all transform options but instead of transformation of whole block, you can transform lines, words or separate symbols of text (this will be detected automatically for all inner text which you add to block)
Example of Word transformations
GreenShift – Page-Building Gutenberg Blocks

You can also enable random option and text will appear randomly. This can make it with interesting effects
Make sure that you add all styling to text before you start to animate it. Otherwise, you need to reload page
GreenShift

Stagger animations

This kind of animations allows you to animate several items at the same time (one by one with delay). You can add this to direct child of block or to all items with specific class on page
Product SchemaProduct schema is good to get advanced snippet with price and star snippet
Event SchemaEvent schema is great for any kind of tickets, events or meetings and provides extended snippet
FAQ SchemaThis is easiest way to get extended snippets in google and it has QA style in google
Video SchemaVideos become more and more popular and have separate section in google
Batch Scroll Animations

This kind of animations allows adding effects to all child items separately while scrolling. For example, you can wrap your content with an animation container to add an appearance effect.
https://twitter.com/GreenshiftWP/status/1558073102218698753?s=20&t=LYHXerm5rK8mdYrSPZ7rCA
Mobile options

You can also set to have different options for Desktop and mobile version
https://twitter.com/GreenshiftWP/status/1562820363616419847?s=20&t=LYHXerm5rK8mdYrSPZ7rCA
Auto width and height calculation

This is very useful when you need to make effect for unknown width and height of element. Imagine that you have many blocks with images with different height and you need to add scroll which works the same for all images. For example, On hover scroll when image is scrolled from top to bottom in container.
https://twitter.com/GreenshiftWP/status/1564982143180328963?s=20&t=pzF6y7pkI9GwZBOcCpVpgw
Observer

Plugin supports observer trigger of GSAP
You can attach swipe, drag, and touch triggers with direction. Here is example of combining several observer and animation effects. Use swipe left or right or drag.
Scroll Me
Animation of custom properties

You can animate not only transform, color options but also any custom options, including even CSS variables.
Here is example with animation of SVG startOffset parameter
Animation addon Tutorials >
Check now
On Youtube
Copy this post’s content
<!-- wp:paragraph -->
<p>This block is all in one solution to build any kind of animations, from simple transforms to SVG morps and animations by path and it's based on premium version of GSAP library. Let me show some usage of this block and in-depth tutorial in video.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This block is working as container, you can place any other block inside and animate it. Block has several types of usage:</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="transformation-animations">Transformation Animations</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Transform is most common case for animation. Transformation is available in two way: in Animation container block and also in Animation section in all Greenshift blocks</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1171,"width":276,"height":718,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/transform.jpg" alt="" class="wp-image-1171" width="276" height="718"/><figcaption class="wp-element-caption">Animation section for all blocks</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>When you use Animation section inside block, our special light version of animation library is used. So, if your purpose is to add simple reveals like this</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-77cb6797-e438","headingTag":"div","headingContent":"I am simple transform animation","typography":{"alignment":["center"],"textShadow":{},"size":[28],"customweight":"bold"},"animation":{"duration":700,"easing":"ease","type":"custom","y":30,"rx":-60,"o":"0","origin":"bottom center","usegsap":true},"responsive":{"customcss":".wp-site-blocks{overflow:hidden}"}} -->
<div id="gspb_heading-id-gsbp-77cb6797-e438" class="gspb_heading gspb_heading-id-gsbp-77cb6797-e438 " data-gsapinit="1" data-duration="0.7" data-y="30" data-rx="-60" data-o="0" data-origin="bottom center" data-from="yes" data-prehidden="1">I am simple transform animation</div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>Then, it's better to use Animation section under each block instead of Animation container. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="animation-container-block">Animation container block</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Animation Container Block is more advanced block to add different kind of animation to any element. First of all, you can simply wrap any block with animation container and even add animation chains. Just click on icon for any block and select to transform to Animation Container</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1131,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/animationchain-e1652525040167-1024x345.jpg" alt="" class="wp-image-1131"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="multiple-chained-animation">Multiple chained Animation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Animation container has all possibilities of Animation section but much more triggers and types. For example, you can create animation chains when you add different animations step by step or even in parallel mode with different easing and interpolations</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-4df562fe-6cc1","minHeight":[230,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-4df562fe-6cc1" id="gspb_container-id-gsbp-4df562fe-6cc1"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-9e1a6b2","x":200,"ease":"power1-inOut","duration":0.7,"yoyo":true,"loop":true,"triggertype":"load","multiple_animation":"[{\u0022_id\u0022:\u0022U4NzgzND\u0022,\u0022sx\u0022:null,\u0022s\u0022:0.8,\u0022y\u0022:50,\u0022width\u0022:\u0022\u0022,\u0022ease\u0022:\u0022power1-inOut\u0022,\u0022bg\u0022:\u0022\u0022,\u0022rx\u0022:null,\u0022r\u0022:90},{\u0022_id\u0022:\u0022c3NDM4MT\u0022,\u0022s\u0022:0.5,\u0022x\u0022:300,\u0022r\u0022:360,\u0022ease\u0022:\u0022back-inOut\u0022,\u0022duration\u0022:0.8},{\u0022_id\u0022:\u0022U5OTYxMD\u0022,\u0022x\u0022:1,\u0022r\u0022:90}]","set_from":false,"position":{"positionType":["absolute","","",""],"positions":{"values":{}}},"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-9e1a6b2"><div id="gsbp-9e1a6b2" class="gs-gsap-wrap" data-x="200" data-ease="power1-inOut" data-duration="0.7" data-yoyo="yes" data-loop="yes" data-triggertype="load" data-multianimations="[{"_id":"U4NzgzND","sx":null,"s":0.8,"y":50,"width":"","ease":"power1-inOut","bg":"","rx":null,"r":90},{"_id":"c3NDM4MT","s":0.5,"x":300,"r":360,"ease":"back-inOut","duration":0.8},{"_id":"U5OTYxMD","x":1,"r":90}]"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-1ce048fd-0134","customshapeOn":true,"customshape":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 48 48\u0022\u003e\u003clinearGradient id=\u0022a\u0022 x1=\u0022.5\u0022 x2=\u002247.5\u0022 y1=\u002224\u0022 y2=\u002224\u0022 gradientUnits=\u0022userSpaceOnUse\u0022\u003e\u003cstop offset=\u00220\u0022 stop-color=\u0022#b3d\u0022/\u003e\u003cstop offset=\u00221\u0022 stop-color=\u0022#ff5160\u0022/\u003e\u003c/linearGradient\u003e\u003cpath fill=\u0022url(#a)\u0022 d=\u0022M20.5,2.6L0.9,41.9c-1.3,2.6,0.6,5.6,3.5,5.6h39.3c2.9,0,4.7-3,3.5-5.6L27.5,2.6C26-0.2,22-0.2,20.5,2.6z\u0022/\u003e\u003c/svg\u003e","fillone":"#f10aff","filltwo":"#501d9c","gradientRotate":90,"height":[178,null,null,null],"shapeSeparator":{"shape":"17"}} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-1ce048fd-0134" id="gspb_svgBox-id-gsbp-1ce048fd-0134"><svg xmlns="http://www.w3.org/2000/svg" style="width:5rem;height:5rem;margin:10px" viewBox="0 0 48 48"><linearGradient id="a" x1=".5" x2="47.5" y1="24" y2="24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#b3d"></stop><stop offset="1" stop-color="#ff5160"></stop></linearGradient><path fill="url(#a)" d="M20.5,2.6L0.9,41.9c-1.3,2.6,0.6,5.6,3.5,5.6h39.3c2.9,0,4.7-3,3.5-5.6L27.5,2.6C26-0.2,22-0.2,20.5,2.6z"></path></svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="scroll-interpolation">Scroll interpolation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Another useful option for animation container is the possibility to interpolate animation on scroll. </p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-1b186a4","y":50,"s":0.5,"o":0,"triggerend":"+=350","triggerscrub":1,"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-1b186a4"><div id="gsbp-1b186a4" class="gs-gsap-wrap" data-y="50" data-s="0.5" data-o="0" data-duration="1" data-triggertype="scroll" data-triggerend="+=350" data-triggerscrub="1" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/heading {"id":"gsbp-6bda7bda-e545","headingTag":"div","headingContent":"SCROLL","typography":{"textShadow":{},"size":[9.6],"customweight":"bold","sizeUnit":"em","alignment":["center"],"colorState":"Gradient","gradient":"linear-gradient(0deg,rgb(255,255,255) 15%,rgb(207,163,255) 89%)"}} -->
<div id="gspb_heading-id-gsbp-6bda7bda-e545" class="gspb_heading gspb_heading-id-gsbp-6bda7bda-e545 ">SCROLL</div>
<!-- /wp:greenshift-blocks/heading --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:paragraph -->
<p>You can control distance for interpolation, speed, trigger position, or even assign another  block or trigger. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="custom-object-for-animation-and-trigger">Custom object for animation and trigger</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For example, here I enabled Hover trigger animation on button + Multiple animation chain, but I applied this chain not to object itself, but on other icon blocks which I placed under main icon and connected them via custom object option. You can make these connections without limits. For example, you can use one block to control the animation of another block</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-b0c149cf-cdec","flexbox":{"type":"flexbox","alignItems":["center"],"alignContent":["center"],"flexDirection":["column"],"justifyContent":["center"],"flexWrap":["nowrap"]},"position":{"positionType":["relative","","",""],"positions":{"values":{}}},"minHeight":[250,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-b0c149cf-cdec" id="gspb_container-id-gsbp-b0c149cf-cdec"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-84990a0","s":0.9,"duration":0.1,"triggertype":"hover","multiple_animation":"[{\u0022_id\u0022:\u0022AyMTgwMD\u0022,\u0022obj\u0022:\u0022.firsthover\u0022,\u0022y\u0022:119,\u0022r\u0022:120,\u0022duration\u0022:0.6},{\u0022_id\u0022:\u0022k4NzEyNT\u0022,\u0022obj\u0022:\u0022.secondhover\u0022,\u0022x\u0022:120,\u0022r\u0022:136,\u0022duration\u0022:0.6,\u0022time\u0022:\u0022\u003e-0.5\u0022},{\u0022_id\u0022:\u0022k4Mzk2OD\u0022,\u0022x\u0022:-120,\u0022r\u0022:-320,\u0022obj\u0022:\u0022.thirdhover\u0022,\u0022time\u0022:\u0022\u003e-0.4\u0022}]","multikeyframes":false,"position":{"positionType":["","","",""],"positions":{"values":{}},"Zindex":1}} -->
<div id="gspb_gsap-gsbp-84990a0"><div id="gsbp-84990a0" class="gs-gsap-wrap" data-s="0.9" data-duration="0.1" data-triggertype="hover" data-multianimations="[{"_id":"AyMTgwMD","obj":".firsthover","y":119,"r":120,"duration":0.6},{"_id":"k4NzEyNT","obj":".secondhover","x":120,"r":136,"duration":0.6,"time":">-0.5"},{"_id":"k4Mzk2OD","x":-120,"r":-320,"obj":".thirdhover","time":">-0.4"}]" data-from="yes"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-959cd1c6-47e4","type":"boxed"} -->
<div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-959cd1c6-47e4" id="gspb_iconBox-id-gsbp-959cd1c6-47e4"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 8.6l-896 516.8c-46 26.6-41.4 94.4 7.6 114.6l280.4 116v204c0 60.4 75.6 86.6 113.4 40.6l121.4-147.6 252.8 104.4c38.2 15.8 81.4-8.4 87.6-49.4l128-834.2c8.2-53.4-49.2-91.8-95.2-65.2zM384 960v-177.6l109 45-109 132.6zM832 898.2l-412.4-170.4 399-471.6c9.6-11.2-5.8-26.4-17-16.8l-510.6 435.2-227-93.6 896-517-128 834.2z"></path></svg></div></div>
<!-- /wp:greenshift-blocks/iconbox --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-d482c9b9-d24e","position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["50%"],"top":["50%"]}}},"csstransform":{"translateX":[-50],"unit":["%"],"translateY":[-50]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-d482c9b9-d24e" id="gspb_container-id-gsbp-d482c9b9-d24e"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-40200ddc-a168","iconBox_icon":{"icon":{"font":"rhicon rhi-gamepad","svg":"","image":""},"fill":"#ff2a2a","fillhover":"","type":"font","iconSize":[80]},"position":{"positionType":["static","","",""],"positions":{"values":{"left":[null]}},"Zindex":0},"csstransform":{"unit":["%"],"translateX":[null],"translateY":[null],"translateZ":[null]},"className":"firsthover"} -->
<div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-40200ddc-a168 firsthover" id="gspb_iconBox-id-gsbp-40200ddc-a168"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M960.14 192h-640.14c-0.014-0-0.030-0-0.046-0-176.731 0-320 143.269-320 320s143.269 320 320 320c89.491 0 170.402-36.735 228.476-95.949l0.050-0.051h183.040c58.124 59.265 139.035 96 228.526 96 176.731 0 320-143.269 320-320 0-176.698-143.215-319.946-319.9-320l-0.005-0zM960 768c-0.226 0.001-0.493 0.001-0.76 0.001-71.329 0-135.79-29.402-181.927-76.747l-0.053-0.054-18.86-19.2h-236.8l-18.82 19.2c-46.189 47.4-110.651 76.801-181.98 76.801-0.281 0-0.563-0-0.844-0.001l0.043 0c-141.14 0-256-114.84-256-256s114.86-256 256-256h640c141.22 0 256 114.84 256 256s-114.86 256-256 256zM444.36 472.72h-85.080v-85.080c-0.045-10.829-8.811-19.595-19.636-19.64l-0.004-0h-39.28c-10.829 0.045-19.595 8.811-19.64 19.636l-0 0.004v85.080h-85.080c-10.829 0.045-19.595 8.811-19.64 19.636l-0 0.004v39.28c0.045 10.829 8.811 19.595 19.636 19.64l0.004 0h85.080v85.080c0.045 10.829 8.811 19.595 19.636 19.64l0.004 0h39.28c10.829-0.045 19.595-8.811 19.64-19.636l0-0.004v-85.080h85.080c10.829-0.045 19.595-8.811 19.64-19.636l0-0.004v-39.28c-0.045-10.829-8.811-19.595-19.636-19.64l-0.004-0zM896 512c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0zM1024 384c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64v0c0-35.346-28.654-64-64-64v0z"></path></svg></div></div>
<!-- /wp:greenshift-blocks/iconbox --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-ef3432dd-3dd2","position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["50%"],"top":["50%"]}}},"csstransform":{"translateX":[-50],"unit":["%"],"translateY":[-50]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-ef3432dd-3dd2" id="gspb_container-id-gsbp-ef3432dd-3dd2"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-62a127a3-8fbc","iconBox_icon":{"icon":{"font":"rhicon rhi-bolt-regular","svg":"","image":""},"fill":"#ffd900","fillhover":"","type":"font","iconSize":[80]},"position":{"positionType":["static","","",""],"positions":{"values":{}},"Zindex":0},"className":"secondhover"} -->
<div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-62a127a3-8fbc secondhover" id="gspb_iconBox-id-gsbp-62a127a3-8fbc"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 768 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M755.6 335.8c-16.4-28.6-46.2-45.8-79.2-45.8h-188.8l57.4-175c7.4-27.6 1.6-56.6-15.8-79.4-17.6-22.6-44.2-35.6-72.8-35.6h-261c-45.6 0-84.6 34.2-89.6 74.2l-104.8 424.4c-3.8 27.6 4.4 55.4 22.6 76.4s44.6 33 72.4 33h196.2l-69.8 303.4c-6.4 27.4-0.2 55.8 17.2 77.8 17.4 22.2 43.6 34.8 71.8 34.8 32.6 0 63-17.6 77.6-43.2l366.4-553.4c16.8-28.6 16.8-63 0.2-91.6zM320.2 914.8l92.6-402.8h-317.8l100.4-416 255.2-1.8-95.6 291.8h313l-347.8 528.8z"></path></svg></div></div>
<!-- /wp:greenshift-blocks/iconbox --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-238426cf-0070","position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["50%"],"top":["50%"]}}},"csstransform":{"translateX":[-50],"unit":["%"],"translateY":[-50]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-238426cf-0070" id="gspb_container-id-gsbp-238426cf-0070"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-44a6f76b-67fc","iconBox_icon":{"icon":{"font":"rhicon rhi-gift","svg":"","image":""},"fill":"#8012fe","fillhover":"","type":"font","iconSize":[60]},"position":{"positionType":["static","","",""],"positions":{"values":{}},"Zindex":0},"className":"thirdhover"} -->
<div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-44a6f76b-67fc thirdhover" id="gspb_iconBox-id-gsbp-44a6f76b-67fc"><div class="gspb_iconBox__wrapper" style="display:inline-flex"><svg class="" style="display:inline-block;vertical-align:middle" width="72" height="72" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M928 288h-78.6c19-26.8 30.6-59.8 30.6-96 0-88.2-66.8-160-149-160-84.6 0-133.6 50.8-219 191.6-85.4-140.8-134.4-191.6-219-191.6-82.2 0-149 71.8-149 160 0 36.2 11.6 69.2 30.6 96h-78.6c-53 0-96 43-96 96v192c0 17.6 14.4 32 32 32h32v288c0 53 43 96 96 96h704c53 0 96-43 96-96v-288h32c17.6 0 32-14.4 32-32v-192c0-53-43-96-96-96zM552.4 280.8c99-166.6 132-184.8 178.6-184.8 46.8 0 85 43 85 96s-38.2 96-85 96h-183l4.4-7.2zM293 96c46.8 0 79.6 18.2 178.6 184.8l4.2 7.2h-183c-46.8 0-85-43-85-96 0.2-53 38.4-96 85.2-96zM384 928h-224c-17.6 0-32-14.4-32-32v-288h256v320zM384 544h-320v-160c0-17.6 14.4-32 32-32h288v192zM576 928h-128v-576h128v576zM896 896c0 17.6-14.4 32-32 32h-224v-320h256v288zM960 544h-320v-192h288c17.6 0 32 14.4 32 32v160z"></path></svg></div></div>
<!-- /wp:greenshift-blocks/iconbox --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="pin-scroll-combination">Pin Scroll combination</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Another useful option for Animation container is possibility to combine it with Pin Scroll block with pin effect which is quite popular nowadays. </p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-d38d5494-b7ac","position":{"positionType":["relative","","",""],"positions":{"values":{}},"Zindex":3},"align":"full"} -->
<div class="wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-d38d5494-b7ac" id="gspb_container-id-gsbp-d38d5494-b7ac"><!-- wp:greenshift-blocks/pinscroll {"id":"gsbp-942ba168-e0eb","triggerstart":"top top","triggerend":"+=700"} -->
<div class="wp-block-greenshift-blocks-pinscroll gspb_pinscroll_wrap"><div id="gspb_gsapin-gsbp-942ba168-e0eb" class="gs-pin-wrap gs-gsap-wrap undefined" data-triggertype="scroll" data-triggerstart="top top" data-triggerend="+=700" data-ease="none" data-pinned="yes" data-pinforce="yes" style="display:flex"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-b358434","s":0.8,"origin":"center 20%","custom_origin":true,"triggerstart":"top top","triggerend":"+=700","triggerscrub":1,"pinReparent":false,"set_from":false,"position":{"positionType":["relative","","",""],"positions":{"values":{}},"Zindex":1},"align":"full"} -->
<div id="gspb_gsap-gsbp-b358434" class="wp-block-greenshift-blocks-animation-container alignfull"><div id="gsbp-b358434" class="gs-gsap-wrap" data-s="0.8" data-origin="center 20%" data-duration="1" data-triggertype="scroll" data-triggerstart="top top" data-triggerend="+=700" data-triggerscrub="1"><!-- wp:greenshift-blocks/image {"id":"gsbp-6b4cd4c7-bdf1","align":["center",null,null,null],"originalWidth":2000,"originalHeight":1100,"position":{"positionType":["relative","","",""],"positions":{"values":{}},"Zindex":1},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/05/livemockup.jpg","mediaid":1168,"alt":"","blockVisibility":{},"conditions_arr_visibility":[]} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-6b4cd4c7-bdf1" id="gspb_image-id-gsbp-6b4cd4c7-bdf1"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/livemockup.jpg" data-src="" alt="" loading="lazy" width="2000" height="1100"/></div>
<!-- /wp:greenshift-blocks/image --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div></div>
<!-- /wp:greenshift-blocks/pinscroll -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-c1e1afcb-27c6","headingTag":"div","headingContent":"THE PIN","typography":{"textShadow":{},"size":[9.6],"customweight":"bold","sizeUnit":"em","alignment":["center"],"colorState":"Gradient","gradient":"linear-gradient(0deg,rgb(255,255,255) 15%,rgb(204,168,232) 89%)"},"position":{"positionType":["absolute","","",""],"positions":{"values":{"bottom":["300px"],"left":["50%"]}},"Zindex":2},"csstransform":{"translateX":[-50],"unit":["%"]}} -->
<div id="gspb_heading-id-gsbp-c1e1afcb-27c6" class="gspb_heading gspb_heading-id-gsbp-c1e1afcb-27c6 ">THE PIN</div>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="custom-origin">Custom origin</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can make custom origin point for animation. This is useful when you make 3d transformation (when you change rotate X, rotate Y or Z transform)</p>
<!-- /wp:paragraph -->

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

<!-- wp:greenshift-blocks/container {"id":"gsbp-b91ee1cb-7508","minHeight":[230,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-b91ee1cb-7508" id="gspb_container-id-gsbp-b91ee1cb-7508"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-9c22af0","y":98,"rx":70,"origin":"top center","ease":"power1-inOut","yoyo":true,"loop":true,"triggertype":"load","set_from":false,"position":{"positionType":["absolute","","",""],"positions":{"values":{}}},"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-9c22af0"><div id="gsbp-9c22af0" class="gs-gsap-wrap" data-y="98" data-rx="70" data-origin="top center" data-ease="power1-inOut" data-duration="1" data-yoyo="yes" data-loop="yes" data-triggertype="load"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-ef542c6","customshapeOn":false,"customshape":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 48 48\u0022\u003e\u003clinearGradient id=\u0022a\u0022 x1=\u0022.5\u0022 x2=\u002247.5\u0022 y1=\u002224\u0022 y2=\u002224\u0022 gradientUnits=\u0022userSpaceOnUse\u0022\u003e\u003cstop offset=\u00220\u0022 stop-color=\u0022#b3d\u0022/\u003e\u003cstop offset=\u00221\u0022 stop-color=\u0022#ff5160\u0022/\u003e\u003c/linearGradient\u003e\u003cpath fill=\u0022url(#a)\u0022 d=\u0022M20.5,2.6L0.9,41.9c-1.3,2.6,0.6,5.6,3.5,5.6h39.3c2.9,0,4.7-3,3.5-5.6L27.5,2.6C26-0.2,22-0.2,20.5,2.6z\u0022/\u003e\u003c/svg\u003e","fillone":"#f10aff","filltwo":"#7e34ec","gradientRotate":41,"height":[178,null,null,null],"shapeSeparator":{"shape":"17"}} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-ef542c6" id="gspb_svgBox-id-gsbp-ef542c6"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="17" x="0px" y="0px" viewBox="0 0 200 200" preserveAspectRatio="none" fill="url(#svggsbp-ef542c6)"><path data-style="17" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path><defs><linearGradient id="svggsbp-ef542c6" gradientTransform="rotate(41)"><stop style="stop-color:#f10aff" offset="0%"></stop><stop style="stop-color:#7e34ec" offset="100%"></stop></linearGradient></defs></svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="global-animation-parameters">Global Animation Parameters </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are few global parameters which you can change for all animations.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1185,"width":267,"height":243,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/param.jpg" alt="" class="wp-image-1185" width="267" height="243"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>For example, ease type</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-31b3bbe","x":300,"origin":"top right","ease":"back-inOut","yoyo":true,"loop":true,"triggertype":"load","set_from":false,"position":{"positionType":["static","","",""],"positions":{"values":{}}},"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-31b3bbe"><div id="gsbp-31b3bbe" class="gs-gsap-wrap" data-x="300" data-origin="top right" data-ease="back-inOut" data-duration="1" data-yoyo="yes" data-loop="yes" data-triggertype="load"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-041a7de","customshapeOn":false,"customshape":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 viewBox=\u00220 0 48 48\u0022\u003e\u003clinearGradient id=\u0022a\u0022 x1=\u0022.5\u0022 x2=\u002247.5\u0022 y1=\u002224\u0022 y2=\u002224\u0022 gradientUnits=\u0022userSpaceOnUse\u0022\u003e\u003cstop offset=\u00220\u0022 stop-color=\u0022#b3d\u0022/\u003e\u003cstop offset=\u00221\u0022 stop-color=\u0022#ff5160\u0022/\u003e\u003c/linearGradient\u003e\u003cpath fill=\u0022url(#a)\u0022 d=\u0022M20.5,2.6L0.9,41.9c-1.3,2.6,0.6,5.6,3.5,5.6h39.3c2.9,0,4.7-3,3.5-5.6L27.5,2.6C26-0.2,22-0.2,20.5,2.6z\u0022/\u003e\u003c/svg\u003e","fillone":"#f10aff","filltwo":"#7e34ec","gradientRotate":41,"height":[178,null,null,null],"shapeSeparator":{"shape":"17"}} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-041a7de" id="gspb_svgBox-id-gsbp-041a7de"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="17" x="0px" y="0px" viewBox="0 0 200 200" preserveAspectRatio="none" fill="url(#svggsbp-041a7de)"><path data-style="17" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path><defs><linearGradient id="svggsbp-041a7de" gradientTransform="rotate(41)"><stop style="stop-color:#f10aff" offset="0%"></stop><stop style="stop-color:#7e34ec" offset="100%"></stop></linearGradient></defs></svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="svg-animations">SVG animations</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SVG is vector format of graphic. It has one big advantage over regular images - it can be scalable without losing details. Also, SVG is like code of image and we can animate many parameters of this code.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="svg-draw">SVG draw</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This type is one of possible type of animations. It allows to make draw effect of any svg which has stroke parameter. Greenshift plugin also has many ready svg shapes in <a href="https://greenshiftwp.com/svg-shape/" data-type="post" data-id="514">SVG shape block</a> and you can enable animate option in them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Example of draw effect</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/svgshape {"id":"gsbp-02edab40-8bc2","fillone":"","stroke":"#000000","shapeJustify":"center","width":[224,null,null,null],"shapeSeparator":{"shape":"3"},"animatesvg":true,"animatesvgduration":3.9} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-02edab40-8bc2" id="gspb_svgBox-id-gsbp-02edab40-8bc2"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="3" x="0px" y="0px" viewBox="0 0 375 89" preserveAspectRatio="none" fill="none" stroke="#000000" data-svgdraw="1" class="gs-gsap-wrap" data-from="yes" data-duration="3.9"><path data-style="3" d="M1.08783 40.0777C7.29202 41.2118 83.1483 54.3848 97.36 25.4894C101.223 17.639 101.257 5.19956 96.4512 2.56348C89.433 -1.28063 68.8099 13.9596 62.9904 33.9593C56.9504 54.7209 66.6345 81.3275 81.8226 86.1011C103.739 92.9809 138.046 54.7185 151.311 19.3641C152.849 15.2405 155.617 9.64519 154.633 9.03055C153.342 8.28555 145.91 15.4379 142.784 23.4131C137.123 37.8579 143.688 59.8465 156.021 65.8464C182.326 78.6438 241.077 21.8848 234.311 7.86341C233.168 5.48303 229.913 3.88088 227.864 4.73008C218.909 8.43982 223.789 62.7682 241.016 67.7493C261.227 73.6442 299.604 11.6123 293.982 6.01057C292.595 4.63255 288.298 6.27427 285.777 8.64081C272.935 20.4638 285.231 65.587 301.663 67.9263C319.498 70.4753 343.709 22.9198 336.61 15.5762C334.939 13.8497 331.146 13.8998 330.208 15.4249C328.171 18.7524 338.906 30.539 373.656 57.6108" stroke-width="3"></path><defs><linearGradient><stop></stop><stop></stop></linearGradient></defs></svg></div>
<!-- /wp:greenshift-blocks/svgshape -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="svg-path">SVG Path</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This type allows to move some object on svg path. You can use svg image as path object or simply place svg coordinates of path. You can use absolute position of object (it will use path as motion, but keep own position) or you can align object directly to path and it's turns.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-d1d78c28-c49f","animation":{"duration":200,"easing":"ease","usegsap":true,"x":"","y":null,"z":"","o":"0","s":"","r":"","rx":"","ry":"","onload":true},"position":{"positionType":["relative","","",""],"zIndex":null,"positions":{"values":{"bottom":[null],"left":[null]}},"Zindex":3},"responsive":{"hideOnMobile":false,"hideOnTablet":false,"hideOnLandscape":false}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-d1d78c28-c49f" id="gspb_container-id-gsbp-d1d78c28-c49f" data-gsapinit="1" data-duration="0.2" data-o="0" data-from="yes" data-triggertype="load" data-prehidden="1"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-c7b4507","animation_type":"svg_line_draw","duration":3,"customobject":"theMask3","set_from":false,"responsive":{"hideOnMobile":false},"position":{"positionType":["static","","",""],"zIndex":null,"positions":{"values":{"top":["-100px"],"left":["-20px"],"bottom":[null]}},"Zindex":2},"csstransform":{"rotateZ":[null],"rotateX":[null],"rotateY":[null]}} -->
<div id="gspb_gsap-gsbp-c7b4507"><div id="gsbp-c7b4507" class="gs-gsap-wrap" data-duration="3" data-svgdraw="yes" data-triggertype="scroll" data-customobject="theMask3"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-ca57fe97-e947","spacingshape":{"margin":{"values":{"top":[0],"right":[0],"bottom":[0],"left":[0]},"unit":["px","px","px","px"],"locked":true},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"customshapeOn":true,"customshape":"\u003csvg width=\u0022211\u0022 height=\u0022300\u0022 viewBox=\u00220 0 211 300\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cdefs\u003e\n    \u003cmask id=\u0022theMask3\u0022 maskUnits=\u0022userSpaceOnUse\u0022\u003e\n        \u003cpath id=\u0022motionpath3\u0022 d=\u0022M0.499655 3.50001C45.4854 8.75036 150.597 31.3465 108.057 159.882C79.6673 245.663 167.697 295.308 210.357 296.443\u0022 stroke=\u0022white\u0022 stroke-width=\u00227\u0022 stroke-dasharray=\u002220 15\u0022/\u003e\n    \u003c/mask\u003e\n    \u003c/defs\u003e\n     \u003cg id=\u0022maskReveal3\u0022 mask=\u0022url(#theMask3)\u0022\u003e\n        \n\u003cpath d=\u0022M0.500631 3.50001C45.4864 8.75036 150.598 31.3465 108.058 159.882C79.6683 245.663 167.698 295.308 210.358 296.443\u0022 stroke=\u0022url(#paint0_linear_1236_615)\u0022 stroke-width=\u00227\u0022 stroke-dasharray=\u002220 15\u0022/\u003e\n\u003cdefs\u003e\n\u003clinearGradient id=\u0022paint0_linear_1236_615\u0022 x1=\u00222.52557\u0022 y1=\u002211.3248\u0022 x2=\u0022236.427\u0022 y2=\u0022301.494\u0022 gradientUnits=\u0022userSpaceOnUse\u0022\u003e\n\u003cstop stop-color=\u0022#37A6D7\u0022/\u003e\n\u003cstop offset=\u00220.46875\u0022 stop-color=\u0022#D9DC52\u0022/\u003e\n\u003cstop offset=\u00221\u0022 stop-color=\u0022#FF430C\u0022/\u003e\n\u003c/linearGradient\u003e\n\u003c/defs\u003e\n    \u003c/g\u003e\n\u003c/svg\u003e","width":[170,null,null,null],"height":[240,null,null,null],"position":{"positionType":["static","","",""],"positions":{"values":{}}}} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-ca57fe97-e947" id="gspb_svgBox-id-gsbp-ca57fe97-e947"><svg width="211" style="width:5rem;height:5rem;margin:10px" height="300" viewBox="0 0 211 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
    <mask id="theMask3" maskUnits="userSpaceOnUse">
        <path id="motionpath3" d="M0.499655 3.50001C45.4854 8.75036 150.597 31.3465 108.057 159.882C79.6673 245.663 167.697 295.308 210.357 296.443" stroke="white" stroke-width="7" stroke-dasharray="20 15"></path>    </mask>    </defs>
     <g id="maskReveal3" mask="url(#theMask3)">
        
<path d="M0.500631 3.50001C45.4864 8.75036 150.598 31.3465 108.058 159.882C79.6683 245.663 167.698 295.308 210.358 296.443" stroke="url(#paint0_linear_1236_615)" stroke-width="7" stroke-dasharray="20 15"></path><defs><linearGradient id="paint0_linear_1236_615" x1="2.52557" y1="11.3248" x2="236.427" y2="301.494" gradientUnits="userSpaceOnUse">
<stop stop-color="#37A6D7"></stop>
<stop offset="0.46875" stop-color="#D9DC52"></stop>
<stop offset="1" stop-color="#FF430C"></stop>
</linearGradient>
</defs>
    </g>
</svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-bf0f2f8","animation_type":"svg_motion_path","duration":2.6,"path":"#motionpath3","path_align":"#motionpath3","path_orient":true,"set_from":false,"position":{"positionType":["absolute","","",""],"zIndex":null,"positions":{"values":{"top":["-10px"],"left":["0px"]}},"Zindex":55}} -->
<div id="gspb_gsap-gsbp-bf0f2f8"><div id="gsbp-bf0f2f8" class="gs-gsap-wrap" data-duration="2.6" data-triggertype="scroll" data-path="#motionpath3" data-path-align="#motionpath3" data-path-orient="yes"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-13c05d8c-1757","spacingshape":{"margin":{"values":{"top":[0],"right":[0],"bottom":[0],"left":[0]},"unit":["px","px","px","px"],"locked":true},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"customshapeOn":true,"customshape":"\u003csvg width=\u002239\u0022 height=\u002238\u0022 viewBox=\u00220 0 39 38\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath d=\u0022M38.7284 5.53288L16.6417 37.3977L0.339706 0.101652L38.7284 5.53288Z\u0022 fill=\u0022#FE4614\u0022/\u003e\n\u003c/svg\u003e\n","width":[30,null,null,null],"height":[30,null,null,null],"csstransform":{"time":null,"easing":"cubic","translateX":[null,null,null,null],"translateY":[2,null,null,null],"translateZ":[null,null,null,null],"unit":["px","px","px","px"],"scale":0,"rotateZ":[23,null,null,null],"translateXHover":[null,null,null,null],"translateYHover":[null,null,null,null],"translateZHover":[null,null,null,null],"unitHover":["px","px","px","px"],"scaleHover":0,"rotateZHover":[null,null,null,null]}} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-13c05d8c-1757" id="gspb_svgBox-id-gsbp-13c05d8c-1757"><svg width="39" style="width:5rem;height:5rem;margin:10px" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.7284 5.53288L16.6417 37.3977L0.339706 0.101652L38.7284 5.53288Z" fill="#FE4614"></path>
</svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="svg-morph">SVG Morph</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This allows to make smooth morph from one svg to another. Any kind of SVG is allowed and also you can put custom code.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-4aa6a163-c8ed"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-4aa6a163-c8ed" id="gspb_infoBox-id-gsbp-4aa6a163-c8ed"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>If you use ID of SVG instead coordinates, make sure that id parameter is added to path and not to SVG itself</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-dc82d25","animation_type":"svg_morph","ease":"none","delay":1,"duration":0.3,"yoyo":true,"loop":true,"repeatdelay":true,"morphend":"#light"} -->
<div id="gspb_gsap-gsbp-dc82d25"><div id="gsbp-dc82d25" class="gs-gsap-wrap" data-ease="none" data-delay="1" data-duration="0.3" data-repeatdelay="yes" data-yoyo="yes" data-loop="yes" data-triggertype="scroll" data-morphend="#light" data-from="yes"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-a476b607-883a","customshapeOn":true,"customshape":" \u003csvg viewBox=\u0022120 118 152 152\u0022\u003e\n    \u003cdefs\u003e\n      \u003cpath id=\u0022light\u0022 d=\u0022M 201.7 150.6 C 210 150.6 217.6 153.1 223.9 157.5 C 234.1 164.5 240.8 176.3 240.8 189.7 C 240.8 201.4 234.2 210.3 228.2 217.8 C 223.1 224.1 218.4 229.4 218.3 234.7 C 218.3 237.3 216 239.6 213.3 239.6 C 205.9 239.6 198.4 239.6 191 239.6 C 188.2 239.6 186 237.3 186 234.7 C 185.5 228.4 178.7 222.4 172.5 214.6 C 167.3 208 162.6 200.1 162.6 189.7 C 162.6 178.2 167.6 167.8 175.5 160.7 C 182.5 154.4 191.7 150.6 201.7 150.6 C 201.7 150.6 201.7 150.6 201.7 150.6M 258 217.7 C 259.8 218.7 260.5 221.1 259.4 223 C 258.3 224.9 255.9 225.5 254.1 224.5 C 249.7 221.9 245.3 219.4 240.9 216.8 C 242.4 214.7 243.7 212.4 244.8 210.1 C 249.2 212.6 253.6 215.1 258 217.7M 162.6 216.8 C 158.2 219.4 153.8 221.9 149.4 224.4 C 147.5 225.5 145.1 224.8 144.1 223 C 143 221.1 143.6 218.7 145.5 217.7 C 149.9 215.1 154.2 212.6 158.6 210.1 C 159.7 212.4 161.1 214.7 162.6 216.8 C 162.6 216.8 162.6 216.8 162.6 216.8M 154.2 193.6 C 149.1 193.6 144.1 193.6 139 193.6 C 136.9 193.6 135.1 191.8 135.1 189.7 C 135.1 187.6 136.9 185.8 139 185.8 C 144.1 185.8 149.1 185.8 154.2 185.8 C 154.1 187.1 154.1 188.4 154.1 189.7 C 154.1 191 154.1 192.3 154.2 193.6 C 154.2 193.6 154.2 193.6 154.2 193.6M 158.6 169.3 C 154.2 166.8 149.9 164.3 145.5 161.8 C 143.6 160.7 143 158.3 144.1 156.4 C 145.1 154.5 147.5 153.9 149.4 155 C 153.8 157.5 158.2 160 162.6 162.6 C 161.1 164.7 159.7 167 158.6 169.3 C 158.6 169.3 158.6 169.3 158.6 169.3M 174.6 150.5 C 172.1 146.1 169.5 141.7 167 137.3 C 165.9 135.5 166.6 133.1 168.4 132 C 170.3 130.9 172.7 131.6 173.8 133.5 C 176.3 137.8 178.8 142.2 181.4 146.6 C 179 147.7 176.7 149 174.6 150.5 C 174.6 150.5 174.6 150.5 174.6 150.5M 197.8 142.2 C 197.8 137.1 197.8 132 197.8 127 C 197.8 124.9 199.6 123.1 201.8 123.1 C 203.9 123.1 205.6 124.9 205.6 127 C 205.6 132 205.6 137.1 205.6 142.2 C 204.4 142.1 203.1 142 201.8 142 C 200.4 142 199.1 142.1 197.8 142.2 C 197.8 142.2 197.8 142.2 197.8 142.2M 222.1 146.6 C 222.8 145.4 223.5 144.3 224.1 143.1 C 224.9 141.8 225.7 140.5 226.4 139.1 C 227.5 137.2 228.6 135.3 229.7 133.4 C 230.8 131.6 233.1 130.9 235 132 C 236.9 133.1 237.5 135.5 236.5 137.3 C 235.3 139.3 234.2 141.3 233 143.3 C 232.3 144.5 231.6 145.7 230.9 146.9 C 230.2 148.1 229.5 149.3 228.9 150.5 C 227.7 149.7 226.4 148.9 225.2 148.2 C 224.2 147.6 223.1 147.1 222.1 146.6 C 222.1 146.6 222.1 146.6 222.1 146.6M 240.9 162.6 C 241.9 162 243 161.4 244 160.8 C 245.2 160.1 246.3 159.5 247.5 158.8 C 249.7 157.5 251.9 156.3 254.1 155 C 255.9 153.9 258.3 154.5 259.4 156.4 C 260.5 158.3 259.8 160.7 258 161.8 C 255.8 163 253.7 164.3 251.5 165.5 C 250.3 166.2 249.1 166.9 247.8 167.6 C 246.8 168.2 245.8 168.8 244.8 169.4 C 244.3 168.2 241.7 163.7 240.9 162.6 C 240.9 162.6 240.9 162.6 240.9 162.6M 249.2 185.8 C 254.3 185.8 259.4 185.8 264.4 185.8 C 266.6 185.8 268.3 187.5 268.3 189.7 C 268.3 191.8 266.6 193.6 264.4 193.6 C 259.4 193.6 254.3 193.6 249.2 193.6 C 249.3 192.3 249.4 191 249.4 189.7 C 249.4 188.4 249.3 187.1 249.2 185.8 C 249.2 185.8 249.2 185.8 249.2 185.8M 202.1 275.5 C 206.6 275.5 210.5 272.3 213.3 267.2 C 205.9 267.2 198.4 267.2 191 267.2 C 193.7 272.3 197.7 275.5 202.1 275.5 C 202.1 275.5 202.1 275.5 202.1 275.5M 191 254.7 C 198.4 254.7 205.9 254.7 213.3 254.7 C 216.1 254.7 218.3 256.9 218.3 259.6 C 218.3 259.6 218.3 259.6 218.3 259.6 C 218.3 262.4 216.1 264.5 213.3 264.5 C 205.9 264.5 198.4 264.5 191 264.5 C 188.2 264.5 186 262.4 186 259.6 C 186 259.6 186 259.6 186 259.6 C 186 256.9 188.2 254.7 191 254.7 C 191 254.7 191 254.7 191 254.7M 191 242.2 C 198.4 242.2 205.9 242.2 213.3 242.2 C 216.1 242.2 218.3 244.4 218.3 247.1 C 218.3 247.1 218.3 247.1 218.3 247.1 C 218.3 249.8 216.1 252 213.3 252 C 205.9 252 198.4 252 191 252 C 188.2 252 186 249.8 186 247.1 C 186 247.1 186 247.1 186 247.1 C 186 244.4 188.2 242.2 191 242.2 C 191 242.2 191 242.2 191 242.2z\u0022 /\u003e\n\n    \u003c/defs\u003e\n\n    \u003cpath id=\u0022shape\u0022 d=\u0022M 226.3 157 C 205 157 201.4 171.1 201.4 171.1 C 201 172.7 200.3 172.7 199.9 171.1 C 199.9 171.1 196.4 157 175.1 157 C 153.8 157 146.4 179.7 146.4 189.3 C 146.4 219.9 198.2 251.3 198.2 251.3 C 199.5 252.2 201.8 252.2 203.2 251.3 C 203.2 251.3 255 219.9 255 189.3 C 255 179.7 247.5 157 226.3 157z\u0022 style=\u0022fill: #FF33FF\u0022 /\u003e\n  \u003c/svg\u003e\n\n","shapeJustify":"center"} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-a476b607-883a" id="gspb_svgBox-id-gsbp-a476b607-883a"><svg viewBox="120 118 152 152" style="width:5rem;height:5rem;margin:10px">
    <defs>
      <path id="light" d="M 201.7 150.6 C 210 150.6 217.6 153.1 223.9 157.5 C 234.1 164.5 240.8 176.3 240.8 189.7 C 240.8 201.4 234.2 210.3 228.2 217.8 C 223.1 224.1 218.4 229.4 218.3 234.7 C 218.3 237.3 216 239.6 213.3 239.6 C 205.9 239.6 198.4 239.6 191 239.6 C 188.2 239.6 186 237.3 186 234.7 C 185.5 228.4 178.7 222.4 172.5 214.6 C 167.3 208 162.6 200.1 162.6 189.7 C 162.6 178.2 167.6 167.8 175.5 160.7 C 182.5 154.4 191.7 150.6 201.7 150.6 C 201.7 150.6 201.7 150.6 201.7 150.6M 258 217.7 C 259.8 218.7 260.5 221.1 259.4 223 C 258.3 224.9 255.9 225.5 254.1 224.5 C 249.7 221.9 245.3 219.4 240.9 216.8 C 242.4 214.7 243.7 212.4 244.8 210.1 C 249.2 212.6 253.6 215.1 258 217.7M 162.6 216.8 C 158.2 219.4 153.8 221.9 149.4 224.4 C 147.5 225.5 145.1 224.8 144.1 223 C 143 221.1 143.6 218.7 145.5 217.7 C 149.9 215.1 154.2 212.6 158.6 210.1 C 159.7 212.4 161.1 214.7 162.6 216.8 C 162.6 216.8 162.6 216.8 162.6 216.8M 154.2 193.6 C 149.1 193.6 144.1 193.6 139 193.6 C 136.9 193.6 135.1 191.8 135.1 189.7 C 135.1 187.6 136.9 185.8 139 185.8 C 144.1 185.8 149.1 185.8 154.2 185.8 C 154.1 187.1 154.1 188.4 154.1 189.7 C 154.1 191 154.1 192.3 154.2 193.6 C 154.2 193.6 154.2 193.6 154.2 193.6M 158.6 169.3 C 154.2 166.8 149.9 164.3 145.5 161.8 C 143.6 160.7 143 158.3 144.1 156.4 C 145.1 154.5 147.5 153.9 149.4 155 C 153.8 157.5 158.2 160 162.6 162.6 C 161.1 164.7 159.7 167 158.6 169.3 C 158.6 169.3 158.6 169.3 158.6 169.3M 174.6 150.5 C 172.1 146.1 169.5 141.7 167 137.3 C 165.9 135.5 166.6 133.1 168.4 132 C 170.3 130.9 172.7 131.6 173.8 133.5 C 176.3 137.8 178.8 142.2 181.4 146.6 C 179 147.7 176.7 149 174.6 150.5 C 174.6 150.5 174.6 150.5 174.6 150.5M 197.8 142.2 C 197.8 137.1 197.8 132 197.8 127 C 197.8 124.9 199.6 123.1 201.8 123.1 C 203.9 123.1 205.6 124.9 205.6 127 C 205.6 132 205.6 137.1 205.6 142.2 C 204.4 142.1 203.1 142 201.8 142 C 200.4 142 199.1 142.1 197.8 142.2 C 197.8 142.2 197.8 142.2 197.8 142.2M 222.1 146.6 C 222.8 145.4 223.5 144.3 224.1 143.1 C 224.9 141.8 225.7 140.5 226.4 139.1 C 227.5 137.2 228.6 135.3 229.7 133.4 C 230.8 131.6 233.1 130.9 235 132 C 236.9 133.1 237.5 135.5 236.5 137.3 C 235.3 139.3 234.2 141.3 233 143.3 C 232.3 144.5 231.6 145.7 230.9 146.9 C 230.2 148.1 229.5 149.3 228.9 150.5 C 227.7 149.7 226.4 148.9 225.2 148.2 C 224.2 147.6 223.1 147.1 222.1 146.6 C 222.1 146.6 222.1 146.6 222.1 146.6M 240.9 162.6 C 241.9 162 243 161.4 244 160.8 C 245.2 160.1 246.3 159.5 247.5 158.8 C 249.7 157.5 251.9 156.3 254.1 155 C 255.9 153.9 258.3 154.5 259.4 156.4 C 260.5 158.3 259.8 160.7 258 161.8 C 255.8 163 253.7 164.3 251.5 165.5 C 250.3 166.2 249.1 166.9 247.8 167.6 C 246.8 168.2 245.8 168.8 244.8 169.4 C 244.3 168.2 241.7 163.7 240.9 162.6 C 240.9 162.6 240.9 162.6 240.9 162.6M 249.2 185.8 C 254.3 185.8 259.4 185.8 264.4 185.8 C 266.6 185.8 268.3 187.5 268.3 189.7 C 268.3 191.8 266.6 193.6 264.4 193.6 C 259.4 193.6 254.3 193.6 249.2 193.6 C 249.3 192.3 249.4 191 249.4 189.7 C 249.4 188.4 249.3 187.1 249.2 185.8 C 249.2 185.8 249.2 185.8 249.2 185.8M 202.1 275.5 C 206.6 275.5 210.5 272.3 213.3 267.2 C 205.9 267.2 198.4 267.2 191 267.2 C 193.7 272.3 197.7 275.5 202.1 275.5 C 202.1 275.5 202.1 275.5 202.1 275.5M 191 254.7 C 198.4 254.7 205.9 254.7 213.3 254.7 C 216.1 254.7 218.3 256.9 218.3 259.6 C 218.3 259.6 218.3 259.6 218.3 259.6 C 218.3 262.4 216.1 264.5 213.3 264.5 C 205.9 264.5 198.4 264.5 191 264.5 C 188.2 264.5 186 262.4 186 259.6 C 186 259.6 186 259.6 186 259.6 C 186 256.9 188.2 254.7 191 254.7 C 191 254.7 191 254.7 191 254.7M 191 242.2 C 198.4 242.2 205.9 242.2 213.3 242.2 C 216.1 242.2 218.3 244.4 218.3 247.1 C 218.3 247.1 218.3 247.1 218.3 247.1 C 218.3 249.8 216.1 252 213.3 252 C 205.9 252 198.4 252 191 252 C 188.2 252 186 249.8 186 247.1 C 186 247.1 186 247.1 186 247.1 C 186 244.4 188.2 242.2 191 242.2 C 191 242.2 191 242.2 191 242.2z"></path>

    </defs>

    <path id="shape" d="M 226.3 157 C 205 157 201.4 171.1 201.4 171.1 C 201 172.7 200.3 172.7 199.9 171.1 C 199.9 171.1 196.4 157 175.1 157 C 153.8 157 146.4 179.7 146.4 189.3 C 146.4 219.9 198.2 251.3 198.2 251.3 C 199.5 252.2 201.8 252.2 203.2 251.3 C 203.2 251.3 255 219.9 255 189.3 C 255 179.7 247.5 157 226.3 157z" style="fill:#FF33FF"></path>
  </svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="svg-masks">SVG Masks</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can use svg draw effect with Blend option</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://twitter.com/GreenshiftWP/status/1560325155200684034?s=20\u0026t=LYHXerm5rK8mdYrSPZ7rCA","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/GreenshiftWP/status/1560325155200684034?s=20&t=LYHXerm5rK8mdYrSPZ7rCA
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="text-animations">Text animations</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Next type of animations for animation container is Text animations. You can add all transform options but instead of transformation of whole block, you can transform lines, words or separate symbols of text (this will be detected automatically for all inner text which you add to block)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Example of Word transformations</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-37e320f","animation_type":"text_transformations","y":30,"rx":-60,"o":0,"background":"","delay":1,"loop":true,"text":"words","stdelay":0.2,"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-37e320f"><div id="gsbp-37e320f" class="gs-gsap-wrap" data-y="30" data-rx="-60" data-o="0" data-delay="1" data-duration="1" data-loop="yes" data-text="words" data-triggertype="scroll" data-stdelay="0.2" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/heading {"id":"gsbp-c315d6d7-e9c2"} -->
<h2 id="gspb_heading-id-gsbp-c315d6d7-e9c2" class="gspb_heading gspb_heading-id-gsbp-c315d6d7-e9c2 ">GreenShift - Page-Building Gutenberg Blocks</h2>
<!-- /wp:greenshift-blocks/heading --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:paragraph -->
<p>You can also enable random option and text will appear randomly. This can make it with interesting effects</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-6c7d447b-cf7e","type":"notice"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-6c7d447b-cf7e" id="gspb_infoBox-id-gsbp-6c7d447b-cf7e"><div class="gs-box notice_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 486.463 486.463"> <g> <g> <path d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z"></path> <path d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"></path> <path d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"></path> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Make sure that you add all styling to text before you start to animate it. Otherwise, you need to reload page</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-702f598","animation_type":"text_transformations","y":30,"rx":-60,"o":0,"background":"#b952fe26","delay":1,"loop":true,"strandom":true,"text":"chars","stdelay":0.2,"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-702f598"><div id="gsbp-702f598" class="gs-gsap-wrap" data-y="30" data-rx="-60" data-o="0" data-bg="#b952fe26" data-delay="1" data-duration="1" data-loop="yes" data-strandom="yes" data-text="chars" data-triggertype="scroll" data-stdelay="0.2" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/heading {"id":"gsbp-748a1c62-e948","headingContent":"GreenShift","typography":{"textShadow":{},"size":[100],"alignment":["center"],"color":"#5900be"}} -->
<h2 id="gspb_heading-id-gsbp-748a1c62-e948" class="gspb_heading gspb_heading-id-gsbp-748a1c62-e948 ">GreenShift</h2>
<!-- /wp:greenshift-blocks/heading --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="stagger-animations">Stagger animations</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This kind of animations allows you to animate several items at the same time (one by one with delay). You can add this to direct child of block or to all items with specific class on page</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-c40a2ea1-30e7","flexbox":{"enable":false,"type":"grid","gridcolumns":[4,null,2,1],"columngap":[20],"rowgap":[20]},"animation":{"duration":700,"easing":"ease","usegsap":true,"y":25,"o":"0","stagger":true,"staggerrandom":false,"staggerdelay":0.6,"s":0.6,"rx":-79,"origin":"bottom center"},"background":{"color":""},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"bottom":[30]},"unit":["px","px","px","px"],"locked":false}},"position":{"positions":{"values":{}},"positionType":"relative","Zindex":3},"align":"wide"} -->
<div class="wp-block-greenshift-blocks-container alignwide gspb_container gspb_container-gsbp-c40a2ea1-30e7" id="gspb_container-id-gsbp-c40a2ea1-30e7" data-gsapinit="1" data-duration="0.7" data-y="25" data-rx="-79" data-s="0.6" data-o="0" data-origin="bottom center" data-from="yes" data-stdelay="0.6" data-stchild="yes" data-prehidden="1"><!-- wp:greenshift-blocks/container {"id":"gsbp-eeace162-adf4","rowspan":[],"columnspan":[],"flexbox":{},"animation":{"duration":700,"easing":"ease"},"background":{"color":"#f9fafc"},"overlay":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"shadow":{},"typography":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"shapeDivider":{"topShape":{},"bottomShape":{}},"responsive":{},"csstransform":{},"carousel":{"arrowPos":[null,null,null,null],"arrowSize":[null,null,null,null],"arrowPosV":[null,null,null,null]},"minHeightUnit":["px","px","px","px"],"width":[null,null,null,null],"widthUnit":["%","%","%","%"],"minHeight":[null,null,null,null],"className":"hovertransition"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-eeace162-adf4 hovertransition" id="gspb_container-id-gsbp-eeace162-adf4"><!-- wp:greenshift-blocks/heading {"id":"gsbp-397bd35f-f10e","headingTag":"div","animatedText":["creativity","imagination","inspiration","passion"],"headingContent":"Product Schema","background":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[20]},"typographyanimated":{},"animation":{"duration":700,"easing":"ease"},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{},"responsive":{},"headingSepSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"spacingBlock":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepWidth":[50,null,null,null],"headingSepWidthUnit":["px","px","px","px"],"numberCircle":"1","enablesubTitle":true,"subTitle":"Product schema is good to get advanced snippet with price and star snippet ","spacingsubTitle":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typographysubTitle":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[15]}} -->
<div id="gspb_heading-id-gsbp-397bd35f-f10e" class="gspb_heading gspb_heading-id-gsbp-397bd35f-f10e ">Product Schema<span class="gspb_heading_subtitle">Product schema is good to get advanced snippet with price and star snippet </span></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/button {"id":"gsbp-9802e13c-f670","buttonContent":"","align":"flex-end","background":{"backgroundState":"Classic","backgroundHoverState":"Classic","color":"#7000f4"},"overlay":{},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"right":[0],"left":[14],"bottom":[13],"top":[13]},"unit":["px","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"iconSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"blockWidth":{"customWidth":{"value":[],"unit":["px","px","px","px"]}},"shadow":{},"typography":{},"animation":{"duration":700,"easing":"ease"},"responsive":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{"time":0.5,"easing":"cubic","translateX":[null,null,null,null],"translateY":[30,null,null,null],"translateZ":[null,null,null,null],"unit":["px","px","px","px"],"scale":[0.6],"rotateZ":[null,null,null,null],"translateXHover":[null,null,null,null],"translateYHover":[0,null,null,null],"translateZHover":[null,null,null,null],"unitHover":["px","px","px","px"],"scaleHover":[1],"rotateZHover":[null,null,null,null],"opacity":0.01,"hoverClass":"hovertransition","opacityHover":1},"buttonLink":"/offerbox/","linkNewWindow":true,"enableIcon":true,"iconBox_icon":{"icon":{"font":"rhicon rhi-arrow-right","svg":"","image":""},"fill":"#ffffff","fillhover":"#ffffff","iconSize":[null,null,null,null],"rotateY":false,"rotateX":false,"rotateZ":0,"type":"font"},"typographyLabel":{}} -->
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-9802e13c-f670" id="gspb_button-id-gsbp-9802e13c-f670"><a class="gspb-buttonbox" href="/offerbox/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-icon"><svg class="" style="display:inline-block;vertical-align:middle" width="15" height="15" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title"></span></span></span></a></div>
<!-- /wp:greenshift-blocks/button --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-75166222-10b1","rowspan":[],"columnspan":[],"flexbox":{},"animation":{"duration":700,"easing":"ease"},"background":{"color":"#f9fafc"},"overlay":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"shadow":{},"typography":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"shapeDivider":{"topShape":{},"bottomShape":{}},"responsive":{},"csstransform":{},"carousel":{"arrowPos":[null,null,null,null],"arrowSize":[null,null,null,null],"arrowPosV":[null,null,null,null]},"minHeightUnit":["px","px","px","px"],"width":[null,null,null,null],"widthUnit":["%","%","%","%"],"minHeight":[null,null,null,null],"className":"hovertransition"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-75166222-10b1 hovertransition" id="gspb_container-id-gsbp-75166222-10b1"><!-- wp:greenshift-blocks/heading {"id":"gsbp-1129798d-ea9a","headingTag":"div","animatedText":["creativity","imagination","inspiration","passion"],"headingContent":"Event Schema","background":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[20]},"typographyanimated":{},"animation":{"duration":700,"easing":"ease"},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{},"responsive":{},"headingSepSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"spacingBlock":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepWidth":[50,null,null,null],"headingSepWidthUnit":["px","px","px","px"],"numberCircle":"1","enablesubTitle":true,"subTitle":"Event schema is great for any kind of tickets, events or meetings and provides extended snippet","spacingsubTitle":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typographysubTitle":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[15]}} -->
<div id="gspb_heading-id-gsbp-1129798d-ea9a" class="gspb_heading gspb_heading-id-gsbp-1129798d-ea9a ">Event Schema<span class="gspb_heading_subtitle">Event schema is great for any kind of tickets, events or meetings and provides extended snippet</span></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/button {"id":"gsbp-880ba8e2-e8ae","buttonContent":"","align":"flex-end","background":{"backgroundState":"Classic","backgroundHoverState":"Classic","color":"#7000f4"},"overlay":{},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"right":[0],"left":[14],"bottom":[13],"top":[13]},"unit":["px","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"iconSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"blockWidth":{"customWidth":{"value":[],"unit":["px","px","px","px"]}},"shadow":{},"typography":{},"animation":{"duration":700,"easing":"ease"},"responsive":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{"time":0.5,"easing":"cubic","translateX":[null,null,null,null],"translateY":[30,null,null,null],"translateZ":[null,null,null,null],"unit":["px","px","px","px"],"scale":[0.6],"rotateZ":[null,null,null,null],"translateXHover":[null,null,null,null],"translateYHover":[0,null,null,null],"translateZHover":[null,null,null,null],"unitHover":["px","px","px","px"],"scaleHover":[1],"rotateZHover":[null,null,null,null],"opacity":0.01,"hoverClass":"hovertransition","opacityHover":1},"buttonLink":"/event-box/","linkNewWindow":true,"enableIcon":true,"iconBox_icon":{"icon":{"font":"rhicon rhi-arrow-right","svg":"","image":""},"fill":"#ffffff","fillhover":"#ffffff","iconSize":[null,null,null,null],"rotateY":false,"rotateX":false,"rotateZ":0,"type":"font"},"typographyLabel":{}} -->
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-880ba8e2-e8ae" id="gspb_button-id-gsbp-880ba8e2-e8ae"><a class="gspb-buttonbox" href="/event-box/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-icon"><svg class="" style="display:inline-block;vertical-align:middle" width="15" height="15" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title"></span></span></span></a></div>
<!-- /wp:greenshift-blocks/button --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-3320ea5b-097a","rowspan":[],"columnspan":[],"flexbox":{},"animation":{"duration":700,"easing":"ease"},"background":{"color":"#f9fafc"},"overlay":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"shadow":{},"typography":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"shapeDivider":{"topShape":{},"bottomShape":{}},"responsive":{},"csstransform":{},"carousel":{"arrowPos":[null,null,null,null],"arrowSize":[null,null,null,null],"arrowPosV":[null,null,null,null]},"minHeightUnit":["px","px","px","px"],"width":[null,null,null,null],"widthUnit":["%","%","%","%"],"minHeight":[null,null,null,null],"className":"hovertransition"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-3320ea5b-097a hovertransition" id="gspb_container-id-gsbp-3320ea5b-097a"><!-- wp:greenshift-blocks/heading {"id":"gsbp-44013220-7e40","headingTag":"div","animatedText":["creativity","imagination","inspiration","passion"],"headingContent":"FAQ Schema","background":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[20]},"typographyanimated":{},"animation":{"duration":700,"easing":"ease"},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{},"responsive":{},"headingSepSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"spacingBlock":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepWidth":[50,null,null,null],"headingSepWidthUnit":["px","px","px","px"],"numberCircle":"1","enablesubTitle":true,"subTitle":"This is easiest way to get extended snippets in google and it has QA style in google","spacingsubTitle":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typographysubTitle":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[15]}} -->
<div id="gspb_heading-id-gsbp-44013220-7e40" class="gspb_heading gspb_heading-id-gsbp-44013220-7e40 ">FAQ Schema<span class="gspb_heading_subtitle">This is easiest way to get extended snippets in google and it has QA style in google</span></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/button {"id":"gsbp-0227b282-eaf5","buttonContent":"","align":"flex-end","background":{"backgroundState":"Classic","backgroundHoverState":"Classic","color":"#7000f4"},"overlay":{},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"right":[0],"left":[14],"bottom":[13],"top":[13]},"unit":["px","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"iconSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"blockWidth":{"customWidth":{"value":[],"unit":["px","px","px","px"]}},"shadow":{},"typography":{},"animation":{"duration":700,"easing":"ease"},"responsive":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{"time":0.5,"easing":"cubic","translateX":[null,null,null,null],"translateY":[30,null,null,null],"translateZ":[null,null,null,null],"unit":["px","px","px","px"],"scale":[0.6],"rotateZ":[null,null,null,null],"translateXHover":[null,null,null,null],"translateYHover":[0,null,null,null],"translateZHover":[null,null,null,null],"unitHover":["px","px","px","px"],"scaleHover":[1],"rotateZHover":[null,null,null,null],"opacity":0.01,"hoverClass":"hovertransition","opacityHover":1},"buttonLink":"/accordion/","linkNewWindow":true,"enableIcon":true,"iconBox_icon":{"icon":{"font":"rhicon rhi-arrow-right","svg":"","image":""},"fill":"#ffffff","fillhover":"#ffffff","iconSize":[null,null,null,null],"rotateY":false,"rotateX":false,"rotateZ":0,"type":"font"},"typographyLabel":{}} -->
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-0227b282-eaf5" id="gspb_button-id-gsbp-0227b282-eaf5"><a class="gspb-buttonbox" href="/accordion/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-icon"><svg class="" style="display:inline-block;vertical-align:middle" width="15" height="15" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title"></span></span></span></a></div>
<!-- /wp:greenshift-blocks/button --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-05d63bba-a078","rowspan":[],"columnspan":[],"flexbox":{},"animation":{"duration":700,"easing":"ease"},"background":{"color":"#f9fafc"},"overlay":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"shadow":{},"typography":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"shapeDivider":{"topShape":{},"bottomShape":{}},"responsive":{},"csstransform":{},"carousel":{"arrowPos":[null,null,null,null],"arrowSize":[null,null,null,null],"arrowPosV":[null,null,null,null]},"minHeightUnit":["px","px","px","px"],"width":[null,null,null,null],"widthUnit":["%","%","%","%"],"minHeight":[null,null,null,null],"className":"hovertransition"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-05d63bba-a078 hovertransition" id="gspb_container-id-gsbp-05d63bba-a078"><!-- wp:greenshift-blocks/heading {"id":"gsbp-875e4938-4720","headingTag":"div","animatedText":["creativity","imagination","inspiration","passion"],"headingContent":"Video Schema","background":{},"border":{"borderRadius":{"values":{},"unit":"px","locked":true}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[20]},"typographyanimated":{},"animation":{"duration":700,"easing":"ease"},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{},"responsive":{},"headingSepSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepAfterSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"spacingBlock":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepWidth":[50,null,null,null],"headingSepWidthUnit":["px","px","px","px"],"numberCircle":"1","enablesubTitle":true,"subTitle":"Videos become more and more popular and have separate section in google ","spacingsubTitle":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typographysubTitle":{"colorState":"Classic","sizeUnit":"px","lineHeightUnit":["px","px","px","px"],"textShadow":{},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","size":[15]}} -->
<div id="gspb_heading-id-gsbp-875e4938-4720" class="gspb_heading gspb_heading-id-gsbp-875e4938-4720 ">Video Schema<span class="gspb_heading_subtitle">Videos become more and more popular and have separate section in google </span></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/button {"id":"gsbp-56ca15c4-2140","buttonContent":"","align":"flex-end","background":{"backgroundState":"Classic","backgroundHoverState":"Classic","color":"#7000f4"},"overlay":{},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"right":[0],"left":[14],"bottom":[13],"top":[13]},"unit":["px","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"iconSpacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"blockWidth":{"customWidth":{"value":[],"unit":["px","px","px","px"]}},"shadow":{},"typography":{},"animation":{"duration":700,"easing":"ease"},"responsive":{},"position":{"positionType":["","","",""],"positions":{"values":{}}},"csstransform":{"time":0.5,"easing":"cubic","translateX":[null,null,null,null],"translateY":[30,null,null,null],"translateZ":[null,null,null,null],"unit":["px","px","px","px"],"scale":[0.6],"rotateZ":[null,null,null,null],"translateXHover":[null,null,null,null],"translateYHover":[0,null,null,null],"translateZHover":[null,null,null,null],"unitHover":["px","px","px","px"],"scaleHover":[1],"rotateZHover":[null,null,null,null],"opacity":0.01,"hoverClass":"hovertransition","opacityHover":1},"buttonLink":"/video-block/","linkNewWindow":true,"enableIcon":true,"iconBox_icon":{"icon":{"font":"rhicon rhi-arrow-right","svg":"","image":""},"fill":"#ffffff","fillhover":"#ffffff","iconSize":[null,null,null,null],"rotateY":false,"rotateX":false,"rotateZ":0,"type":"font"},"typographyLabel":{}} -->
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-56ca15c4-2140" id="gspb_button-id-gsbp-56ca15c4-2140"><a class="gspb-buttonbox" href="/video-block/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-icon"><svg class="" style="display:inline-block;vertical-align:middle" width="15" height="15" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M436.202 76.202l-39.598 39.598c-9.372 9.372-9.372 24.568 0 33.942l310.26 310.258h-682.864c-13.254 0-24 10.746-24 24v56c0 13.254 10.746 24 24 24h682.864l-310.26 310.26c-9.372 9.372-9.372 24.568 0 33.942l39.598 39.598c9.372 9.372 24.568 9.372 33.942 0l418.828-418.828c9.372-9.372 9.372-24.568 0-33.942l-418.83-418.828c-9.372-9.374-24.568-9.374-33.94 0z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title"></span></span></span></a></div>
<!-- /wp:greenshift-blocks/button --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="batch-scroll-animations">Batch Scroll Animations</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This kind of animations allows adding effects to all child items separately while scrolling. For example, you can wrap your content with an animation container to add an appearance effect.</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://twitter.com/GreenshiftWP/status/1558073102218698753?s=20\u0026t=LYHXerm5rK8mdYrSPZ7rCA","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/GreenshiftWP/status/1558073102218698753?s=20&t=LYHXerm5rK8mdYrSPZ7rCA
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="mobile-options">Mobile options</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can also set to have different options for Desktop and mobile version</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://twitter.com/GreenshiftWP/status/1562820363616419847?s=20\u0026t=LYHXerm5rK8mdYrSPZ7rCA","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/GreenshiftWP/status/1562820363616419847?s=20&t=LYHXerm5rK8mdYrSPZ7rCA
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="auto-width-and-height-calculation">Auto width and height calculation</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is very useful when you need to make effect for unknown width and height of element. Imagine that you have many blocks with images with different height and you need to add scroll which works the same for all images. For example, On hover scroll when image is scrolled from top to bottom in container. </p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://twitter.com/GreenshiftWP/status/1564982143180328963?s=20\u0026t=pzF6y7pkI9GwZBOcCpVpgw","type":"rich","providerNameSlug":"twitter","responsive":true} -->
<figure class="wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter"><div class="wp-block-embed__wrapper">
https://twitter.com/GreenshiftWP/status/1564982143180328963?s=20&t=pzF6y7pkI9GwZBOcCpVpgw
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="observer">Observer</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Plugin supports <a href="https://greensock.com/docs/v3/Plugins/Observer" target="_blank" rel="noreferrer noopener">observer trigger of GSAP</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can attach swipe, drag, and touch triggers with direction. Here is example of combining several observer and animation effects. Use swipe left or right or drag.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-6b8374a","s":0.5,"o":32,"duration":0.2,"triggertype":"mousefollow","customtrigger":".circlemenu","set_from":false} -->
<div id="gspb_gsap-gsbp-6b8374a"><div id="gsbp-6b8374a" class="gs-gsap-wrap" data-s="0.5" data-o="32" data-duration="0.2" data-triggertype="mousefollow" data-customtrigger=".circlemenu"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-998b307d-28ba","fillone":"#ff0606","filltwo":"","width":[50,null,null,null],"height":[50,null,null,null],"shapeSeparator":{"shape":"17"}} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-998b307d-28ba" id="gspb_svgBox-id-gsbp-998b307d-28ba"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="17" x="0px" y="0px" viewBox="0 0 200 200" preserveAspectRatio="none" fill="#ff0606"><path data-style="17" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"></path><defs><linearGradient><stop></stop><stop></stop></linearGradient></defs></svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-94cc5a5","r":-25,"ease":"none","triggertype":"observe","set_from":false,"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[200],"bottom":[200]},"unit":["px","px","px","px"],"locked":false}},"observetype":"onchange","addspeedX":0.5,"addspeedY":0.5,"flexAlign":"center","className":"circlemenu"} -->
<div id="gspb_gsap-gsbp-94cc5a5" class="wp-block-greenshift-blocks-animation-container circlemenu"><div id="gsbp-94cc5a5" class="gs-gsap-wrap" data-r="-25" data-ease="none" data-duration="1" data-triggertype="observe" data-observetype="onchange" data-addspeedx="0.5" data-addspeedy="0.5"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-e9a9502","r":360,"duration":120,"loop":true} -->
<div id="gspb_gsap-gsbp-e9a9502"><div id="gsbp-e9a9502" class="gs-gsap-wrap" data-r="360" data-duration="120" data-loop="yes" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-d7f5588","animation_type":"stagger_transformations","y":20,"r":30,"s":0.4,"o":0,"background":"","origin":"","ease":"power4-inOut","duration":1.4,"strandom":true,"stchild":false,"stagger":".itemblob","stdelay":0.09,"responsive":{"customcss":"img{-webkit-user-drag: none;user-drag: none;}.circlemenu::selection{background: none transparent}"},"csstransform":{"rotateZInfinite":null,"infinitetime":10,"infinitebounce":true,"rotateXInfinite":null,"rotateYInfinite":null},"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-d7f5588"><div id="gsbp-d7f5588" class="gs-gsap-wrap" data-y="20" data-r="30" data-s="0.4" data-o="0" data-ease="power4-inOut" data-duration="1.4" data-strandom="yes" data-stagger=".itemblob" data-triggertype="scroll" data-stdelay="0.09" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-b1999a9","s":0.3,"o":0,"ease":"elastic-out","duration":2} -->
<div id="gspb_gsap-gsbp-b1999a9"><div id="gsbp-b1999a9" class="gs-gsap-wrap" data-s="0.3" data-o="0" data-ease="elastic-out" data-duration="2" data-triggertype="scroll" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/container {"id":"gsbp-0a21a6ab-48c1","flexbox":{"type":"flexbox","flexDirection":["column"],"justifyContent":["center"],"alignItems":["center"]},"background":{"color":"#000000","backgroundState":"Gradient","gradient":"linear-gradient(135deg,rgb(0,49,196) 13%,rgb(155,81,224) 100%)"},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"typography":{"textShadow":{},"color":"#ffffff"},"width":[140,null,null,null],"widthUnit":["px","%","%","px"],"minHeight":[140,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-0a21a6ab-48c1" id="gspb_container-id-gsbp-0a21a6ab-48c1"><!-- wp:greenshift-blocks/text {"id":"gsbp-96f7521d-e49a","textContent":"Scroll Me"} -->
<div id="gspb_text-id-gsbp-96f7521d-e49a" class="gspb_text gspb_text-id-gsbp-96f7521d-e49a ">Scroll Me</div>
<!-- /wp:greenshift-blocks/text --></div>
<!-- /wp:greenshift-blocks/container --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-bf024a7","r":-360,"duration":100,"loop":true,"mouse_move_enabled":true,"prlx_xy":60,"position":{"positionType":["absolute","","",""],"positions":{"values":{"bottom":["-110px",null,null,"-30px"],"right":["-140px",null,null,"-90px"]}}},"className":"itemblob"} -->
<div id="gspb_gsap-gsbp-bf024a7" class="wp-block-greenshift-blocks-animation-container itemblob"><div class="gs-prlx-mouse" data-prlx-xy="60"><div id="gsbp-bf024a7" class="gs-gsap-wrap" data-r="-360" data-duration="100" data-loop="yes" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/container {"id":"gsbp-9357ba6b-d906","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{"all":["solid"]},"size":{"all":[1]},"color":{"all":["#f0f0f0"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":true},"overflow":["hidden"]},"shadow":{"hoffset":0,"voffset":5,"blur":"43","spread":0,"color":"#bdd0db26","position":null},"csstransform":{"scaleHover":[1.21],"time":"0.5"},"width":[120,null,null,90],"widthUnit":["px","%","%","px"],"minHeight":[120,null,null,90]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-9357ba6b-d906" id="gspb_container-id-gsbp-9357ba6b-d906"><!-- wp:greenshift-blocks/image {"id":"gsbp-0a255b28-4d78","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[10],"right":[10],"bottom":[10],"left":[10]},"unit":["px","px","px","px"],"locked":true}},"valign":["top",null,null,null],"originalWidth":800,"originalHeight":800,"responsive":{"customcss":"{GREENSHIFT}{\ncursor:pointer;\n}"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/ear8.webp","mediaid":2088,"alt":"","blockVisibility":{},"conditions_arr_visibility":[]} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-0a255b28-4d78" id="gspb_image-id-gsbp-0a255b28-4d78"><img src="https://greenshiftwp.com/wp-content/uploads/2022/09/ear8.webp" data-src="" alt="" loading="lazy" width="800" height="800"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-7cdb408","r":-360,"duration":80,"loop":true,"mouse_move_enabled":true,"prlx_xy":20,"position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["-80px",null,null,"-30px"],"bottom":["-180px",null,null,"-95px"]}}},"className":"itemblob"} -->
<div id="gspb_gsap-gsbp-7cdb408" class="wp-block-greenshift-blocks-animation-container itemblob"><div class="gs-prlx-mouse" data-prlx-xy="20"><div id="gsbp-7cdb408" class="gs-gsap-wrap" data-r="-360" data-duration="80" data-loop="yes" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/container {"id":"gsbp-e5803213-f085","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{"all":["solid"]},"size":{"all":[1]},"color":{"all":["#f0f0f0"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":true},"overflow":["hidden"]},"shadow":{"hoffset":0,"voffset":5,"blur":"43","spread":0,"color":"#bdd0db26","position":null},"csstransform":{"scaleHover":[1.21],"time":"0.5"},"width":[140,null,null,90],"widthUnit":["px","%","%","px"],"minHeight":[140,null,null,90]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-e5803213-f085" id="gspb_container-id-gsbp-e5803213-f085"><!-- wp:greenshift-blocks/image {"id":"gsbp-a5d99916-1bb7","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[10],"right":[10],"bottom":[10],"left":[10]},"unit":["px","px","px","px"],"locked":true}},"valign":["top",null,null,null],"originalWidth":2012,"originalHeight":1656,"responsive":{"customcss":"{GREENSHIFT}{\ncursor:pointer;\n}"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/ear6.webp","mediaid":2119,"alt":"","blockVisibility":{},"conditions_arr_visibility":[]} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-a5d99916-1bb7" id="gspb_image-id-gsbp-a5d99916-1bb7"><img src="https://greenshiftwp.com/wp-content/uploads/2022/09/ear6.webp" data-src="" alt="" loading="lazy" width="2012" height="1656"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-e931380","r":-360,"duration":90,"loop":true,"mouse_move_enabled":true,"prlx_xy":60,"position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["-180px",null,null,"-90px"],"top":["-34px",null,null,"-30px"]}}},"className":"itemblob"} -->
<div id="gspb_gsap-gsbp-e931380" class="wp-block-greenshift-blocks-animation-container itemblob"><div class="gs-prlx-mouse" data-prlx-xy="60"><div id="gsbp-e931380" class="gs-gsap-wrap" data-r="-360" data-duration="90" data-loop="yes" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/container {"id":"gsbp-87c13ff8-0e0b","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{"all":["solid"]},"size":{"all":[1]},"color":{"all":["#f0f0f0"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":true},"overflow":["hidden"]},"shadow":{"hoffset":0,"voffset":5,"blur":"43","spread":0,"color":"#bdd0db26","position":null},"csstransform":{"scaleHover":[1.21],"time":"0.5"},"width":[130,null,null,80],"widthUnit":["px","%","%","px"],"minHeight":[130,null,null,80]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-87c13ff8-0e0b" id="gspb_container-id-gsbp-87c13ff8-0e0b"><!-- wp:greenshift-blocks/image {"id":"gsbp-e535c7bf-e5fb","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"valign":["top",null,null,null],"originalWidth":1776,"originalHeight":1972,"responsive":{"customcss":"{GREENSHIFT}{\ncursor:pointer;\n}"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/air1.webp","mediaid":2055,"alt":"","blockVisibility":{},"conditions_arr_visibility":[]} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-e535c7bf-e5fb" id="gspb_image-id-gsbp-e535c7bf-e5fb"><img src="https://greenshiftwp.com/wp-content/uploads/2022/09/air1.webp" data-src="" alt="" loading="lazy" width="1776" height="1972"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-3eac0b5","r":-360,"duration":110,"loop":true,"mouse_move_enabled":true,"prlx_xy":30,"position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["20px",null,null,"30px"],"top":["-180px",null,null,"-95px"]}}},"className":"itemblob"} -->
<div id="gspb_gsap-gsbp-3eac0b5" class="wp-block-greenshift-blocks-animation-container itemblob"><div class="gs-prlx-mouse" data-prlx-xy="30"><div id="gsbp-3eac0b5" class="gs-gsap-wrap" data-r="-360" data-duration="110" data-loop="yes" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/container {"id":"gsbp-f5d2e8cd-0aea","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{"all":["solid"]},"size":{"all":[1]},"color":{"all":["#f0f0f0"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":true},"overflow":["hidden"]},"shadow":{"hoffset":0,"voffset":5,"blur":"43","spread":0,"color":"#bdd0db26","position":null},"csstransform":{"scaleHover":[1.21],"time":"0.5"},"width":[140,null,null,80],"widthUnit":["px","%","%","px"],"minHeight":[140,null,null,80]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-f5d2e8cd-0aea" id="gspb_container-id-gsbp-f5d2e8cd-0aea"><!-- wp:greenshift-blocks/image {"id":"gsbp-127f1266-c66c","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"valign":["top",null,null,null],"originalWidth":1020,"originalHeight":1200,"responsive":{"customcss":"{GREENSHIFT}{\ncursor:pointer;\n}"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/ear3.webp","mediaid":2057,"alt":"","blockVisibility":{},"conditions_arr_visibility":[]} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-127f1266-c66c" id="gspb_image-id-gsbp-127f1266-c66c"><img src="https://greenshiftwp.com/wp-content/uploads/2022/09/ear3.webp" data-src="" alt="" loading="lazy" width="1020" height="1200"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-ffc1ba6","r":-360,"duration":100,"loop":true,"mouse_move_enabled":true,"prlx_xy":40,"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["-60px",null,null,"-40px"],"right":["-180px",null,null,"-100px"]}}},"className":"itemblob"} -->
<div id="gspb_gsap-gsbp-ffc1ba6" class="wp-block-greenshift-blocks-animation-container itemblob"><div class="gs-prlx-mouse" data-prlx-xy="40"><div id="gsbp-ffc1ba6" class="gs-gsap-wrap" data-r="-360" data-duration="100" data-loop="yes" data-triggertype="scroll" data-from="yes"><!-- wp:greenshift-blocks/container {"id":"gsbp-1ecf5d10-ce4e","flexbox":{"type":"flexbox","alignItems":["center"],"flexDirection":["column"],"justifyContent":["center"]},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{"all":["solid"]},"size":{"all":[1]},"color":{"all":["#f0f0f0"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":true},"overflow":["hidden"]},"shadow":{"hoffset":0,"voffset":5,"blur":"43","spread":0,"color":"#bdd0db26","position":null},"csstransform":{"scaleHover":[1.21],"time":"0.5"},"width":[130,null,null,90],"widthUnit":["px","%","%","px"],"minHeight":[130,null,null,90]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-1ecf5d10-ce4e" id="gspb_container-id-gsbp-1ecf5d10-ce4e"><!-- wp:greenshift-blocks/image {"id":"gsbp-b514df3f-49e5","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"right":[15],"bottom":[15],"left":[15]},"unit":["px","px","px","px"],"locked":true}},"valign":["top",null,null,null],"originalWidth":1000,"originalHeight":1000,"responsive":{"customcss":"{GREENSHIFT}{\ncursor:pointer;\n}"},"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2022/09/ear7.webp","mediaid":2118,"alt":"","blockVisibility":{},"conditions_arr_visibility":[]} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-b514df3f-49e5" id="gspb_image-id-gsbp-b514df3f-49e5"><img src="https://greenshiftwp.com/wp-content/uploads/2022/09/ear7.webp" data-src="" alt="" loading="lazy" width="1000" height="1000"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="animation-of-custom-properties">Animation of custom properties</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can animate not only transform, color options but also any custom options, including even CSS variables.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is example with animation of SVG startOffset parameter</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-40ac650","customobject":"textPath","triggerstart":"top center","triggerend":"+=300","triggerscrub":1,"variable1":"startOffset","variable1value":"-500"} -->
<div id="gspb_gsap-gsbp-40ac650"><div id="gsbp-40ac650" class="gs-gsap-wrap" data-duration="1" data-triggertype="scroll" data-customobject="textPath" data-triggerstart="top center" data-triggerend="+=300" data-triggerscrub="1" data-from="yes" data-variable1="startOffset" data-variable1value="-500"><!-- wp:greenshift-blocks/svgshape {"id":"gsbp-511f31e","fillone":"#553388","filltwo":"#f51a1a","shapeJustify":"center","width":[500,null,null,null],"typography":{"textShadow":{},"customweight":"bold"},"shapeSeparator":{"shape":17},"enabletext":true,"svgtext":"Greenshift Page Builder","textlength":440} -->
<div class="wp-block-greenshift-blocks-svgshape gspb_svgBox gspb_svgBox-id-gsbp-511f31e" id="gspb_svgBox-id-gsbp-511f31e"><svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-style="17" x="0px" y="0px" viewBox="0 0 200 200" preserveAspectRatio="none"><path data-style="17" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" id="textshapegsbp-511f31e"></path><defs><linearGradient><stop></stop><stop></stop></linearGradient></defs><defs><linearGradient id="svggsbp-511f31e"><stop offset="0%" style="stop-color:#553388"></stop><stop offset="100%" style="stop-color:#f51a1a"></stop></linearGradient></defs><text fill="url(#svggsbp-511f31e)"><textPath href="#textshapegsbp-511f31e" textLength="440">Greenshift Page Builder</textPath></text></svg></div>
<!-- /wp:greenshift-blocks/svgshape --></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-934880e9-47b1","background":{"color":""},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[50],"right":[20],"bottom":[50],"left":[20]},"unit":["px","px","px","px"],"locked":false}},"className":"hoverbutton"} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-934880e9-47b1 hoverbutton" id="gspb_container-id-gsbp-934880e9-47b1"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-ff8751aa-574a","animation_type":"text_transformations","y":70,"ry":50,"sx":0,"o":0,"text":"chars","stdelay":0.02,"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false},"overflow":["hidden"]}} -->
<div id="gspb_gsap-gsbp-ff8751aa-574a"><div id="gsbp-ff8751aa-574a" class="gs-gsap-wrap" data-y="70" data-ry="50" data-o="0" data-duration="1" data-text="chars" data-triggertype="scroll" data-stdelay="0.02" data-from="yes" data-prehidden="1">
<!-- wp:greenshift-blocks/heading {"id":"gsbp-e0c4beb1-e155","headingTag":"div","headingContent":"Animation addon Tutorials \u003e","typography":{"textShadow":{},"line_height":[60],"size":[50],"customweight":"bold","textBorder":1,"textBorderColor":"#000000","color":"","textBorderHover":1,"textBorderHoverColor":"#de1414","textBorderColorHover":"","fontFamily":{"value":"Poppins","label":"Poppins","fontIndex":709},"localfont":true,"localfontfamily":"Poppins","alignment":["center"],"colorHover":"#00000000","decoration":null,"decorationColor":"","decorationColorHover":"","decorationHover":null},"csstransform":{"time":"0.3"},"responsive":{"customcss":""}} -->
<div id="gspb_heading-id-gsbp-e0c4beb1-e155" class="gspb_heading gspb_heading-id-gsbp-e0c4beb1-e155 ">Animation addon Tutorials ></div>
<!-- /wp:greenshift-blocks/heading -->
</div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:greenshift-blocks/animation-container {"id":"gsbp-bb50dee","s":0.1,"o":0,"ease":"elastic-out","duration":2,"yoyo":true,"triggertype":"hover","customtrigger":".hoverbutton","mouse_move_enabled":true,"prlx_xy":51.8,"multikeyframes":false,"position":{"positionType":["absolute","","",""],"positions":{"values":{"left":["50%"]}},"Zindex":1},"csstransform":{"unit":["%"],"translateX":[-50]}} -->
<div id="gspb_gsap-gsbp-bb50dee"><div class="gs-prlx-mouse" data-prlx-xy="51.8"><div id="gsbp-bb50dee" class="gs-gsap-wrap" data-s="0.1" data-o="0" data-ease="elastic-out" data-duration="2" data-yoyo="yes" data-triggertype="hover" data-customtrigger=".hoverbutton" data-from="yes" data-prehidden="1"><!-- wp:greenshift-blocks/animation-container {"id":"gsbp-a6b24d5","y":20,"ease":"none","duration":2,"yoyo":true,"loop":true,"set_from":false,"multikeyframes":false,"blockVisibility":{},"conditions_arr_visibility":[]} -->
<div id="gspb_gsap-gsbp-a6b24d5"><div id="gsbp-a6b24d5" class="gs-gsap-wrap" data-y="20" data-ease="none" data-duration="2" data-yoyo="yes" data-loop="yes" data-triggertype="scroll"><!-- wp:greenshift-blocks/container {"id":"gsbp-b918a090-0bbb","flexbox":{"type":"flexbox","justifyContent":["center"],"alignItems":["center"],"flexDirection":["column"]},"background":{"color":"#010101"},"border":{"borderRadius":{"values":{"topLeft":99,"topRight":99,"bottomRight":99,"bottomLeft":99},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"typography":{"textShadow":{},"color":"#ffffff","size":[20],"line_height":[23]},"csstransform":{"scaleHover":[1.3],"time":"0.5","easing":"cubic3","scaleInfinite":null,"infinitebounce":false},"containerLink":"https://youtube.com/playlist?list=PLIEKo1RENmYxbs3yL3nMuOzJJ0AY6GvQ2","linkNewWindow":true,"width":[150,null,null,null],"widthUnit":["px","%","%","%"],"minHeight":[150,null,null,null]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-b918a090-0bbb" id="gspb_container-id-gsbp-b918a090-0bbb"><a class="gspb-containerlink" href="https://youtube.com/playlist?list=PLIEKo1RENmYxbs3yL3nMuOzJJ0AY6GvQ2" target="_blank" rel="noopener"></a><!-- wp:greenshift-blocks/text {"id":"gsbp-2b9ec7d1-011c","textContent":"Check now","typography":{"textShadow":{},"size":[15]}} -->
<div id="gspb_text-id-gsbp-2b9ec7d1-011c" class="gspb_text gspb_text-id-gsbp-2b9ec7d1-011c ">Check now</div>
<!-- /wp:greenshift-blocks/text -->

<!-- wp:greenshift-blocks/text {"id":"gsbp-cbe740c7-93b5","textContent":"On Youtube","typography":{"textShadow":{},"hoverUnderline":false,"decoration":"underline","decorationHover":"dotted underline","customweight":"bold"}} -->
<div id="gspb_text-id-gsbp-cbe740c7-93b5" class="gspb_text gspb_text-id-gsbp-cbe740c7-93b5 ">On Youtube</div>
<!-- /wp:greenshift-blocks/text --></div>
<!-- /wp:greenshift-blocks/container --></div></div>
<!-- /wp:greenshift-blocks/animation-container --></div></div></div>
<!-- /wp:greenshift-blocks/animation-container -->

<!-- wp:spacer {"height":"217px"} -->
<div style="height:217px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-600a7feb-c07a","position":{"positionType":["","","",""],"positions":{"values":{}},"Zindex":0}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-600a7feb-c07a" id="gspb_container-id-gsbp-600a7feb-c07a"><!-- wp:spacer {"height":"200px"} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:greenshift-blocks/container -->
design, interactions