Spline3D Viewer - Greenshift

Blog Staff

March 19, 2023

<spline-viewer> for Greenshift

Easily embed your 3d Spline scenes into your website directly in Gutenberg editor and use special Smart loader feature without degrading your web vitals score.

Test Greenshift Loader on Google

Test core Spline3d Loader on Google

In the same time, Greenshift supports all kind of Spline3d features + it has few additional features on top of Spline viewer (responsive sizes, self hosting for splinecode files, custom preloader image, custom backgrounds and gradients, absolute positions, pining while scroll, etc)

Here are some examples.

Embedding

Following

In this example, we enabled Target as Global for both 3d blocks. This means that mouse and scroll related effects will detect position of mouse on whole page. Local target means that effects will be limited only area of 3d block

MOVE MOUSE

Look at

You can enable Look at effect in 3d layer to detect cursor position and animate accordingly

On Scroll animation

That’s all for scroll

Check how to use block. It’s really easy, just copy Spline3d Viewer script. Also yo can upload splinecode files

Copy this post’s content

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

<h2 class="wp-block-heading has-text-align-center" id="spline-viewer-for-greenshift"><spline-viewer> for Greenshift</h2>

<p>Easily embed your 3d Spline scenes into your website directly in Gutenberg editor and use special Smart loader feature without degrading your web vitals score. </p>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-eb0637dd-de92" id="gspb_container-id-gsbp-eb0637dd-de92">
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-4e937d87-9dc2" id="gspb_container-id-gsbp-4e937d87-9dc2">
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-6768dd77-30a0" id="gspb_button-id-gsbp-6768dd77-30a0"><a class="gspb-buttonbox" href="https://pagespeed.web.dev/analysis/https-greenshiftwp-com-spline3d-viewer/8ws83k25kr?form_factor=mobile" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Test Greenshift Loader on Google</span></span></span></a></div>
</div>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-04e1715a-a04e" id="gspb_container-id-gsbp-04e1715a-a04e">
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-23599b10-9179" id="gspb_button-id-gsbp-23599b10-9179"><a class="gspb-buttonbox" href="https://pagespeed.web.dev/analysis/https-viewer-spline-design/6p9at0vlwr?form_factor=mobile" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Test core Spline3d Loader on Google</span></span></span></a></div>
</div>
</div>

<p>In the same time, Greenshift supports all kind of Spline3d features + it has few additional features on top of Spline viewer (responsive sizes, self hosting for splinecode files, custom preloader image, custom backgrounds and gradients, absolute positions, pining while scroll, etc)</p>

<p>Here are some examples.</p>

<div class="wp-block-greenshift-blocks-spline3d alignfull gs-splineloader gspb_id-gsbp-3692e634-2247"><spline-viewer url="https://greenshiftwp.com/wp-content/uploads/2023/03/caramel.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="100vw" height="100vh" style="pointer-events:none" loading="eager"/></div>

<div class="wp-block-greenshift-blocks-row gspb_row gspb_row-id-gsbp-6c7ae05d-8192" id="gspb_row-id-gsbp-6c7ae05d-8192"><div class="gspb_row__content"> 
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--12 gspb_col-id-gsbp-4ece8a27-ff57" id="gspb_col-id-gsbp-4ece8a27-ff57">
<h2 class="wp-block-heading" id="embedding">Embedding</h2>

<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-c7c1a27c-351a"><spline-viewer url="https://prod.spline.design/UWoeqiir20o49Dah/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="400px" height="400px" style="pointer-events:none"/></div>

<h2 class="wp-block-heading" id="following">Following</h2>

<p>In this example, we enabled Target as Global for both 3d blocks. This means that mouse and scroll related effects will detect position of mouse on whole page. Local target means that effects will be limited only area of 3d block</p>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-30eb81da-2937" id="gspb_container-id-gsbp-30eb81da-2937">
<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-226c7e66-11ca"><spline-viewer url="https://prod.spline.design/PBQQBw8bfXDhBo7w/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>

<div id="gspb_text-id-gsbp-e966fb4a-8242" class="gspb_text gspb_text-id-gsbp-e966fb4a-8242 ">MOVE MOUSE</div>

<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-9ef016c1-58b6"><spline-viewer url="https://prod.spline.design/PBQQBw8bfXDhBo7w/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>
</div>

<h2 class="wp-block-heading" id="look-at">Look at</h2>

<p>You can enable Look at effect in 3d layer to detect cursor position and animate accordingly</p>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-03a98b61-a484" id="gspb_container-id-gsbp-03a98b61-a484">
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-3420a055-51cb" id="gspb_container-id-gsbp-3420a055-51cb">
<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-d864d2b8-75e8"><spline-viewer url="https://prod.spline.design/OS922s36poAxrTXE/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>
</div>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-4cd373ba-726f" id="gspb_container-id-gsbp-4cd373ba-726f">
<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-45b2fb4e-7957"><spline-viewer url="https://prod.spline.design/OS922s36poAxrTXE/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>
</div>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-cbde7299-0ed4" id="gspb_container-id-gsbp-cbde7299-0ed4">
<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-1dd9789a-09d4"><spline-viewer url="https://prod.spline.design/OS922s36poAxrTXE/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>
</div>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-d78c2371-daa8" id="gspb_container-id-gsbp-d78c2371-daa8">
<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-f9b48269-af57"><spline-viewer url="https://prod.spline.design/OS922s36poAxrTXE/scene.splinecode" loading-anim="true"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>
</div>
</div>

<p></p>

<h2 class="wp-block-heading" id="on-scroll-animation">On Scroll animation</h2>

<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-ed5666af-6af5" id="gspb_container-id-gsbp-ed5666af-6af5">
<div class="wp-block-greenshift-blocks-spline3d gs-splineloader gspb_id-gsbp-7d1ae33b-eb80"><spline-viewer url="https://prod.spline.design/VLs6IkpxGaY8nODO/scene.splinecode"></spline-viewer><img src="https://greenshiftwp.com/wp-content/plugins/greenshift-animation-and-page-builder-blocks/libs/spline3d/loading.svg" alt="" width="500px" height="500px" style="pointer-events:none"/></div>
</div>

<div style="height:248px" aria-hidden="true" class="wp-block-spacer"></div>

<p class="has-text-align-center">That's all for scroll</p>

<p>Check how to use block. It's really easy, just copy Spline3d Viewer script. Also yo can upload splinecode files</p>

<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-b68bbd54-11f1" id="gs-video-gsbp-b68bbd54-11f1"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://youtu.be/EGmsJ2_ucKU" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="true" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/EGmsJ2_ucKU/maxresdefault.jpg)" data-type="youtube" data-lightbox="true"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#e5daf1;background-image:;opacity:0.5"></div></div></div></div>
</div>
 </div></div>