Reveal Slide effect

Animation Addon

Blog Staff

containers, design

May 17, 2022

Reveal effect is part of Animation Container block. You can find it in Advanced tab section.

This effect is perfect for images. You can add some kind of square reveal. You can control color, duration, direction of slide

Here is example

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

</p> <p>Reveal effect is part of Animation Container block. You can find it in Advanced tab section.</p> <p>This effect is perfect for images. You can add some kind of square reveal. You can control color, duration, direction of slide</p> <p>Here is example</p> <div id="gspb_container-id-gsbp-01906eac-0f7f" class="gspb_container gspb_container-gsbp-01906eac-0f7f wp-block-greenshift-blocks-container"> <div id="gspb_gsap-gsbp-2882c60f-2bd8"> <div class="gs-reveal-wrap" style="position:relative;display:inline-block"> <div class="gs-reveal-cont"> <div id="gsbp-2882c60f-2bd8" class="gs-gsap-wrap" data-duration="1" data-triggertype="scroll" data-from="yes"> <div id="gspb_image-id-gsbp-8e232f0a-d618" class="gspb_image gspb_image-id-gsbp-8e232f0a-d618 wp-block-greenshift-blocks-image"><img decoding="async" src="https://greenshiftwp.com/wp-content/uploads/2022/05/watch4.webp" data-src="" alt="" width="600px" height="754"/></div> </div> </div> <div data-reveal-dir="lr" data-reveal-speed="0.9" data-reveal-bg="#b951ff26" class="gs-reveal-block" style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;pointer-events:none"></div> </div> </div> </div> <div id="gspb_container-id-gsbp-3a2bd765-5998" class="gspb_container gspb_container-gsbp-3a2bd765-5998 wp-block-greenshift-blocks-container"> <div id="gspb_gsap-gsbp-f9884f94-59dc"> <div class="gs-reveal-wrap" style="position:relative;display:inline-block"> <div class="gs-reveal-cont"> <div id="gsbp-f9884f94-59dc" class="gs-gsap-wrap" data-duration="1" data-triggertype="scroll" data-from="yes"> <div id="gspb_image-id-gsbp-c1418107-b35a" class="gspb_image gspb_image-id-gsbp-c1418107-b35a wp-block-greenshift-blocks-image"><img decoding="async" src="https://greenshiftwp.com/wp-content/uploads/2022/05/watch2_1.webp" data-src="" alt="" width="600px" height="797"/></div> </div> </div> <div data-reveal-dir="tb" data-reveal-speed="1" data-reveal-bg="#e5fff6" class="gs-reveal-block" style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;pointer-events:none"></div> </div> </div> </div> <p>