Flip state block is based on GSAP Flip extension. This block allows to make animation from one state to another state. It’s mostly for users with code skills, but there are some predefined styles which can be very helpful even if you have no any technical background.
I think that most common scenario of usage will be floating panel. When user reaches some element, it’s become sticky. Due to our experiments, if your site is e-commerce or affiliate, such button can increase your conversion in few times.
Here is example of default styles for this block. I just placed banner inside Flip block.
Get the latest featuresBuild complex layouts easily
When you reach some point, banner goes to sticky to bottom.
It’s not required to use only this style. The idea is that you place inside Flip container your initial state of element and add styles for your animated final state. Plugin will calculate everything automatically and make smooth animations between states.
As it works independently from your item, you can combine it with other scripts or plugins/blocks. For example, if you have cart button, you can make custom animations for placing something to cart.
You can also have different objects for trigger and for animations.
Another very common scenario of usage which I see now on many sites is video which becomes sticky and minified version when you scroll below video. See example below
<!-- wp:paragraph -->
<p>Flip state block is based on <a href="https://greensock.com/docs/v3/Plugins/Flip/">GSAP Flip</a> extension. This block allows to make animation from one state to another state. It's mostly for users with code skills, but there are some predefined styles which can be very helpful even if you have no any technical background. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>I think that most common scenario of usage will be floating panel. When user reaches some element, it's become sticky. Due to our experiments, if your site is e-commerce or affiliate, such button can increase your conversion in few times. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Here is example of default styles for this block. I just placed banner inside Flip block. </p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/flipstate {"id":"gsbp-c50737c2-7561","duration":0.5,"positionInit":{"positionType":["","","",""],"positions":{"values":{}},"Zindex":100},"positionActive":{"positionType":["fixed","","",""],"positions":{"values":{"bottom":["0px"],"left":["0px"],"right":["0px"]}}}} -->
<div id="gspb_gsapflip-gsbp-c50737c2-7561"><div id="gsbp-c50737c2-7561" class="gs-flip-wrap wp-block-greenshift-blocks-flipstate" data-duration="0.5" data-triggertype="scroll"><!-- wp:greenshift-blocks/container {"id":"gsbp-5419af9e-5df8","flexbox":{"type":"flexbox","justifyContent":["space-between"],"flexDirection":["row",null,"column","column"],"alignItems":["center"],"marginBottom":[20,null,20,20],"marginRight":[20,null,20,20],"marginLeft":[20,null,20,20],"marginTop":[0,null,20,20],"marginUnit":["px","px","px","px"],"marginLock":false},"background":{"backgroundState":"Gradient","gradient":"linear-gradient(to top right,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dsecondary) 0%,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary) 100%)"},"border":{"borderRadius":{"values":{"topLeft":5,"topRight":5,"bottomRight":5,"bottomLeft":5},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[20],"right":[10],"bottom":[10],"left":[10]},"unit":["px","px","px","px"],"locked":false}},"className":"gs-banner"} -->
<div id="gspb_container-id-gsbp-5419af9e-5df8" class="gspb_container gspb_container-gsbp-5419af9e-5df8 wp-block-greenshift-blocks-container gs-banner"><!-- wp:greenshift-blocks/heading {"id":"gsbp-66e680fc-f1ca","headingTag":"div","headingContent":"Get the latest features","typography":{"textShadow":{},"size":[30],"customweight":"bold","color":"#ffffff","alignment":[null,null,"center","center"]},"enablesubTitle":true,"typographysubTitle":{"textShadow":{},"customweight":"normal","color":"#d6d6d6"}} -->
<div id="gspb_heading-id-gsbp-66e680fc-f1ca" class="gspb_heading gspb_heading-id-gsbp-66e680fc-f1ca ">Get the latest features<span class="gspb_heading_subtitle">Build complex layouts easily</span></div>
<!-- /wp:greenshift-blocks/heading -->
<!-- wp:greenshift-blocks/button {"id":"gsbp-4bd90b7a-f21d","buttonContent":"Check prices!","background":{"color":"","backgroundState":"Classic","overlayOpacity":""},"spacing":{"margin":{"values":{"bottom":[null,null,10,10]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[15],"bottom":[15],"right":[25],"left":[25]},"unit":["px","px","px","px"],"locked":false}},"border":{"borderRadius":{"values":{"topLeft":5,"topRight":5,"bottomRight":5,"bottomLeft":5},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"typography":{"textShadow":{},"size":[19]},"csstransform":{"hoverClass":"gs-banner","scaleHover":[1.1],"time":0.5}} -->
<div id="gspb_button-id-gsbp-4bd90b7a-f21d" class="gspb_button_wrapper gspb_button-id-gsbp-4bd90b7a-f21d wp-block-greenshift-blocks-button"><a class="gspb-buttonbox" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Check prices!</span></span></span></a></div>
<!-- /wp:greenshift-blocks/button --></div>
<!-- /wp:greenshift-blocks/container --></div></div>
<!-- /wp:greenshift-blocks/flipstate -->
<!-- wp:paragraph -->
<p>When you reach some point, banner goes to sticky to bottom. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>It's not required to use only this style. The idea is that you place inside Flip container your initial state of element and add styles for your animated final state. Plugin will calculate everything automatically and make smooth animations between states.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>As it works independently from your item, you can combine it with other scripts or plugins/blocks. For example, if you have cart button, you can make custom animations for placing something to cart. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can also have different objects for trigger and for animations.</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":855,"width":278,"height":712,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/trigger.jpg" alt="" class="wp-image-855" width="278" height="712"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Another very common scenario of usage which I see now on many sites is video which becomes sticky and minified version when you scroll below video. See example below</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/flipstate {"id":"gsbp-64a044b8-c810","flipscale":true,"flipstyle":"{GREENSHIFT} .flipactive{position:fixed; right:0; top:0; width:300px}{GREENSHIFT} .gs-flip-wrap{will-change:transform}","position":{"positionType":["relative","","",""],"positions":{"values":{}},"Zindex":99999},"positionInit":{"positionType":["","","",""],"positions":{"values":{}},"Zindex":9}} -->
<div id="gspb_gsapflip-gsbp-64a044b8-c810"><div id="gsbp-64a044b8-c810" class="gs-flip-wrap wp-block-greenshift-blocks-flipstate" data-duration="1" data-triggertype="scroll" data-flipscale="yes"><!-- wp:greenshift-blocks/video {"id":"gsbp-0493a142-aa1a","src":"https://www.youtube.com/watch?v=00ebtAX-a34","provider":"youtube","autoplay":true,"playsInline":true,"muted":true,"poster":"https://i.ytimg.com/vi/00ebtAX-a34/maxresdefault.jpg","modestBranding":true,"suggested":false,"postDate":"2022-05-11T19:03:14"} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-0493a142-aa1a" id="gs-video-gsbp-0493a142-aa1a"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://www.youtube.com/watch?v=00ebtAX-a34" data-provider="youtube" data-autoplay="true" data-playsinline="true" data-controls="true" data-loop="false" data-mute="true" data-overlay="false" data-lightbox="false" data-modestbranding="true" data-suggested="false" frameborder="0" allowfullscreen></iframe></div></div>
<!-- /wp:greenshift-blocks/video --></div><style>#gspb_gsapflip-gsbp-64a044b8-c810 .flipactive{position:fixed; right:0; top:0; width:300px}#gspb_gsapflip-gsbp-64a044b8-c810 .gs-flip-wrap{will-change:transform}</style></div>
<!-- /wp:greenshift-blocks/flipstate -->