Skip to content

Instantly share code, notes, and snippets.

@wpsoul
Created January 6, 2024 19:16
Show Gist options
  • Save wpsoul/69c3f2286d0de0010fe597d8cfcc6128 to your computer and use it in GitHub Desktop.
Save wpsoul/69c3f2286d0de0010fe597d8cfcc6128 to your computer and use it in GitHub Desktop.
Pin scroll with circle reveal in Greenshift Wordpress
<!-- wp:greenshift-blocks/container {"id":"gsbp-d90ec87","inlineCssStyles":".gspb_container-id-gsbp-d90ec87{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-d90ec87.gspb_container \u003e p:last-of-type{margin-bottom:0}.gspb_container{position:relative;}#gspb_container-id-gsbp-d90ec87.gspb_container{min-height:150vh;}","blockWidth":{"customWidth":{"value":[]},"customHeight":{"value":[]},"heightType":"custom","minHeight":["150vh"]},"align":"full"} -->
<div class="wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-d90ec87" id="gspb_container-id-gsbp-d90ec87"><!-- wp:greenshift-blocks/container {"id":"gsbp-89c2d01","inlineCssStyles":".gspb_container-id-gsbp-89c2d01{flex-direction: column;box-sizing: border-box;}#gspb_container-id-gsbp-89c2d01.gspb_container \u003e p:last-of-type{margin-bottom:0}.gspb_container{position:relative;}body.gspb-bodyfront #gspb_container-id-gsbp-89c2d01.gspb_container{position:sticky;top:0px;align-self:start;}#gspb_container-id-gsbp-89c2d01.gspb_container{min-height:100vh;}#gspb_container-id-gsbp-89c2d01.gspb_container{background-size:cover;background-repeat:no-repeat;}#gspb_container-id-gsbp-89c2d01.gspb_container{background-image:url(https://greenshiftwp.com/wp-content/uploads/2023/05/iLLbebaaack_futuristic_porsche_gt3_669d0562-7dd1-4c44-a41e-796b64987119.webp);}#gspb_container-id-gsbp-89c2d01.gspb_container:hover{background-size:cover;}[data-prehidden]{visibility:hidden}#gspb_container-id-gsbp-89c2d01.gspb_container{clip-path:circle(0% at 50% 50%);}","animation":{"duration":700,"easing":"ease","type":"","usegsap":true,"clipInit":"circle(0% at 50% 50%)","clipFinal":"circle(100% at 50% 50%)","set_from":"to","triggerscrub":1,"triggerstart":"0"},"background":{"image":["https://greenshiftwp.com/wp-content/uploads/2023/05/iLLbebaaack_futuristic_porsche_gt3_669d0562-7dd1-4c44-a41e-796b64987119.webp"],"size":["cover"],"repeat":["no-repeat"]},"position":{"positionType":["sticky","","",""],"positions":{"values":{"top":["0px"]}}},"blockWidth":{"customWidth":{"value":[]},"customHeight":{"value":[]},"heightType":"custom","minHeight":["100vh"]},"align":"full"} -->
<div class="wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-89c2d01" id="gspb_container-id-gsbp-89c2d01" data-gsapinit="1" data-duration="0.7" data-clippath="circle(100% at 50% 50%)" data-triggerstart="0" data-triggerscrub="1"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment