Rive app WordPress addon

Blog Staff

January 29, 2023

Rive app is new animation editor for raster and vector graphic. Rive app features allows you to make not only interesting animations but also interactive via State Machine, Listeners and Event system.

Greenshift animation addon allows you to use and configure Rive files directly in WordPress editor, but also we added additional WordPress API + lazy loading feature.

RIVE

How to use Greenshift API for RIVE

Greenshift supports inheritance from Rive State Machine and the creation of global variables which you can use further with other elements on your page. Let’s show you some examples and code snippets

Connect Rive block with page elements

You can connect Rive block with blocks on your page via scripts.

When Rive block is generated in Greenshift, it will create global variables for StateMachine and Rive instance. You can check web console to see names of variables. Then, you can use these variables to control Rive animation and states or control your elements on page via Rive. Use slider below

So, once you upload Rive file in editor, open your page in browser and open web console.

You will see next text in console

Here you will see that plugin generates two variables: stateMachine… and gsRIVE… These variables are unique and they have attached Rive instance and stateMachine instance which you can modify in scripts on your page.

In 7.5 version of Greenshift, you can also copy Input names and Rive object from the Options of Rive block. In the last panel, you will see Developer options

For example, in my example above, I attached a Range slider with water Level with next code

<input type="range" min="0" max="100" value="1" class="inputwater" onchange="stateMachineInput1880.value = this.value">

You can use Smart Code AI plugin to add code snippets on page

As you see, it’s very simple. I just take the value of slider and set it as value of stateMachine of Rive viewer

To make this feature work, your rive app must have enabled StateMachine. See documentation of StateMachine. Also, it’s important to provide stateMachine name in the options of block, so, Greenshift can retrieve information and generate variables for all inputs

In my example, I need to set name “State Machine” in options of block. As you see, my stateMachine has “Level” input and water level is attached to this input. You can find all information on how to make such animations in the documentation of Rive App.

Here is also Rive file for investigation

Using Interaction Layers with Rive

To connect site and Rive block, you can use script snippets and also Interaction layers.

Find more about Interaction Layers

View Documentation

Find an example in Fancy Academy

Visit Academy

Rive Inputs and examples

RiveApp currently has several input types: number, boolean (true/false) and trigger.

If you want to change value of input, use next

//change number
stateMachineInput1880.value = 30;

//change boolean
stateMachineInput1880.value = true;

//dispatch trigger
stateMachineInput1880.fire();

Additionally, we added global variable for whole Rive instance. In practical side, you may want to use it in next way (when state is changed, do something in your script)

RIVE423.onStateChange = (event) => {
    //get event data and use it in your scripts
    //event.data
};

This is another practical example. In this animation, our input blends between different animations. Here we use value from our Input and check it, then, we switch our input value which changes animation in Rive. Good way to extend your forms if you have basic javascript knowledge. Try to set Age < 20 or > 55.

Use Rive with Greenshift API to improve forms

<script>
    function changeMyage(value){
        if(value <20){
            stateMachineInput96a0.value = 0;
        }else if(value >=20 && value < 55){
            stateMachineInput96a0.value = 1;
        }else{
            stateMachineInput96a0.value = 2;
        }
    }
</script>
<input type="number" min="1" max="100" value="20" onchange="changeMyage(this.value)"/>

REGISTER WITH FORM

Chose age

Get full access

Select age to get access

Download file for investigation

But let's go further. Here is another interesting example of how we can use different Layers of animation in Rive. In this example, we created several animations with character looking to one side (Left, Right, Down, Up). Then, we created Two layers of animation and attached Numeric inputs as Blend from Left to Right animation. And another input from Bottom to Top.

Also, we have another boolean input that enables Screaming Animation. So, we have two interactions here: mouth follow and Button trigger.

RIVE

Hover on image

Build a perfect landings with Greenshift.

Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia conse duis enim velit mollit. Exercitation veniam.

Click on button

Code for this script

<script>
    //Mouse follow feature
    window.addEventListener("mousemove", e => {
        if(typeof stateMachineInput5311 != 'undefined'){
            stateMachineInput5311.value = (e.clientX/window.innerWidth)*100;
            stateMachineInput5312.value = 100-((e.clientY/window.innerHeight)*100);
        }
    });

    let btn = document.querySelector('.btncry');
    btn.onclick = (e) => {
        e.preventDefault();
        if(stateMachineInput5310.value == true){
            stateMachineInput5310.value = false;
        }else{
            stateMachineInput5310.value = true;
        }
    }
</script>

By the way, Rive app has Motion follow effect, but it will work only inside container of Rive. So, we made custom cursor effect for whole window which will trigger animation of Rive via inputs

Investigate Eye tracking animation and Character animation

<script>
//Code for Jumping bird before Link click
let triggerbird = document.querySelectorAll('.downloadlinks a');
triggerbird.forEach((item) =>{
item.onclick = (e) => {
e.preventDefault();
let href = item.getAttribute("href");
stateMachineInput2b30.fire();
setTimeout(function () {
window.open(href, '_blank');
}, 1200);
}
});
</script>

Copy this post's content

<!-- wp:paragraph -->
<p>Rive app is new animation editor for raster and vector graphic. <a href="https://rive.app/features" target="_blank" rel="noreferrer noopener">Rive app features</a> allows you to make not only interesting animations but also interactive via State Machine, Listeners and Event system.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Greenshift animation addon allows you to use and configure Rive files directly in Wordpress editor, but also we added additional WordPress API + lazy loading feature.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-72745d98-6174","background":{"backgroundMode":"normal","color":"","backgroundState":"Classic","gradient":"linear-gradient(to bottom right,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary) 0%,var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dsecondary) 100%)"},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[70],"bottom":[70]},"unit":["px","px","px","px"],"locked":false}},"position":{"positionType":["relative","","",""],"positions":{"values":{}}},"align":"full"} -->
<div class="wp-block-greenshift-blocks-container alignfull gspb_container gspb_container-gsbp-72745d98-6174" id="gspb_container-id-gsbp-72745d98-6174"><!-- wp:greenshift-blocks/heading {"id":"gsbp-287a48a0-03af","headingContent":"RIVE","spacing":{"margin":{"values":{"bottom":[0],"top":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"color":"#ffffff","size":[14],"sizeUnit":"em","line_height":[null],"lineHeightUnit":["em"],"useFluid":true,"fluidSizeMin":"4rem","fluidSizePerfect":"16vw","fluidSizeMax":"20rem","fluidLineMin":"4.4rem","fluidLinePerfect":"15vw","fluidLineMax":"18rem","colorState":"Gradient","gradient":"linear-gradient(70deg, #FF8813 0%, #FF0000 40%, #EE0EBD 100%)","alignment":["center"]}} -->
<h2 id="gspb_heading-id-gsbp-287a48a0-03af" class="gspb_heading gspb_heading-id-gsbp-287a48a0-03af ">RIVE</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/rive {"source":"https://greenshiftwp.com/wp-content/uploads/2023/01/hero_image.riv","width":["500px",null,null,"300px"],"height":["400px",null,null,"300px"],"id":"gsbp-626d6f86-e067","position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["50%"],"left":["50%"],"bottom":[null],"right":[null]}},"Zindex":2},"csstransform":{"unit":["%"],"translateX":["-50%"],"translateY":["-50%"],"time":0.5},"snap":false,"artboard":"","statemachine":"MainStateMachine","riveid":"756","align":"full"} -->
<div class="wp-block-greenshift-blocks-rive alignfull gs-riveloader gspb_id-gsbp-626d6f86-e067"><canvas id="gspb_id-gsbp-626d6f86-e067" data-id="756" data-src="https://greenshiftwp.com/wp-content/uploads/2023/01/hero_image.riv" background="#ffffff00" width="500px" height="400px" data-autoplay="true" data-statemachine="MainStateMachine" data-cover="cover"></canvas><img src="https://greenshiftwp.com/wp-content/plugins/greenshiftgsap/libs/rive/loading.svg" alt="" width="500px" height="400px" style="pointer-events:none"/></div>
<!-- /wp:greenshift-blocks/rive --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="how-to-use-greenshift-api-for-rive">How to use Greenshift API for RIVE</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Greenshift supports inheritance from Rive State Machine and the creation of global variables which you can use further with other elements on your page. Let's show you some examples and code snippets</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/row {"id":"gsbp-eaa839a9-8fdc","align":"full","gutterClassName":"gspb_row\u002d\u002dgutter-60","rowLayout":"2","width":[1050,null,null,null],"columnPosition":"center","displayStyles":false,"background":{"backgroundMode":"normal","color":"#080808"},"typography":{"textShadow":{},"color":"#ffffff"},"spacing":{"margin":{"values":{"top":[30],"bottom":[30]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[50],"bottom":[50]},"unit":["px","px","px","px"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-row alignfull gspb_row gspb_row-id-gsbp-eaa839a9-8fdc gspb_row--gutter-60" id="gspb_row-id-gsbp-eaa839a9-8fdc"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-041773b7-f51e","gutterclass":"gspb_row\u002d\u002dgutter-60","columnSize":"6"} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-041773b7-f51e" id="gspb_col-id-gsbp-041773b7-f51e"><!-- wp:greenshift-blocks/heading {"id":"gsbp-0a32830f-4fff","headingContent":"Connect Rive block with page elements","typography":{"textShadow":{},"size":[35]},"headingSeparator":true,"headingSepSpacing":{"margin":{"values":{"right":[20]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"spacingBlock":{"margin":{"values":{"bottom":[30]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"headingSepWidth":[79,null,null,null],"headingSepColor":"#5ba5ff","headingSepStroke":2,"headingSepType":"zigzag"} -->
<div class="gspb_heading_sep_gsbp-0a32830f-4fff"><div class="gspb_heading_sep gspb_heading_sep_before"><svg width="88" height="11" viewBox="0 0 88 11" xmlns="http://www.w3.org/2000/svg"><path d="M87.387 9.066c-7.279 0-7.279-6.787-14.557-6.787-7.28 0-7.28 6.787-14.561 6.787-7.283 0-7.283-6.787-14.565-6.787l-14.562 6.787c-7.286 0-7.286-6.787-14.57-6.787-7.287 0-7.287 6.787-14.571 6.787" fill="none"></path></svg></div><h2 id="gspb_heading-id-gsbp-0a32830f-4fff" class="gspb_heading gspb_heading-id-gsbp-0a32830f-4fff ">Connect Rive block with page elements</h2></div>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:paragraph -->
<p>You can connect Rive block with blocks on your page via scripts. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When Rive block is generated in Greenshift, it will create global variables for StateMachine and Rive instance. You can check web console to see names of variables. Then, you can use these variables to control Rive animation and states or control your elements on page via Rive. Use slider below</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<input type="range" min="0" max="100" value="1" class="inputwater" onchange="stateMachineInput1880.value = this.value">
<!-- /wp:html --></div>
<!-- /wp:greenshift-blocks/row-column -->

<!-- wp:greenshift-blocks/row-column {"id":"gsbp-0c90e5d1-9ece","gutterclass":"gspb_row\u002d\u002dgutter-60","columnSize":"6"} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-0c90e5d1-9ece" id="gspb_col-id-gsbp-0c90e5d1-9ece"><!-- wp:greenshift-blocks/rive {"source":"https://greenshiftwp.com/wp-content/uploads/2023/01/water_bar_demo.riv","loadnow":true,"width":["500px",null,null,"300px"],"height":["450px",null,null,"250px"],"id":"gsbp-861f977b-b9a6","snap":true,"artboard":"","statemachine":"State Machine","riveid":"188"} -->
<div class="wp-block-greenshift-blocks-rive gs-riveloader gspb_id-gsbp-861f977b-b9a6 gs-riveloadnow"><canvas id="gspb_id-gsbp-861f977b-b9a6" data-id="188" data-src="https://greenshiftwp.com/wp-content/uploads/2023/01/water_bar_demo.riv" background="#ffffff00" width="500px" height="450px" data-autoplay="true" data-statemachine="State Machine" data-cover="cover"></canvas><img src="https://greenshiftwp.com/wp-content/plugins/greenshiftgsap/libs/rive/loading.svg" alt="" width="500px" height="450px" style="pointer-events:none"/></div>
<!-- /wp:greenshift-blocks/rive --></div>
<!-- /wp:greenshift-blocks/row-column --> </div></div>
<!-- /wp:greenshift-blocks/row -->

<!-- wp:paragraph -->
<p>So, once you upload Rive file in editor, open your page in browser and open web console.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You will see next text in console</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2623,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://greenshiftwp.com/wp-content/uploads/2023/01/riveapp.jpg" alt="" class="wp-image-2623"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Here you will see that plugin generates two variables: stateMachine... and gsRIVE... These variables are unique and they have attached Rive instance and stateMachine instance which you can modify in scripts on your page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In 7.5 version of Greenshift, you can also copy Input names and Rive object from the Options of Rive block. In the last panel, you will see Developer options</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-b385e509-9753","width":["300px",null,null,null],"originalWidth":608,"originalHeight":420,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2023/01/riveobj.jpg","mediaid":4290,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-b385e509-9753" id="gspb_image-id-gsbp-b385e509-9753"><img src="https://greenshiftwp.com/wp-content/uploads/2023/01/riveobj.jpg" data-src="" alt="" loading="lazy" width="300px" height="420"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:paragraph -->
<p>For example, in my example above, I attached a Range slider with water Level with next code</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><input type="range" min="0" max="100" value="1" class="inputwater" onchange="stateMachineInput1880.value = this.value"></code></pre>
<!-- /wp:code -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-18ce8f91-3ce8"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-18ce8f91-3ce8" id="gspb_infoBox-id-gsbp-18ce8f91-3ce8"><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>You can use <a href="https://greenshiftwp.com/smart-code-ai/" data-type="post" data-id="3393">Smart Code AI</a> plugin to add code snippets on page</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:paragraph -->
<p>As you see, it's very simple. I just take the value of slider and set it as value of stateMachine of Rive viewer</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To make this feature work, your rive app must have enabled StateMachine. See documentation of StateMachine. Also, it's important to provide stateMachine name in the options of block, so, Greenshift can retrieve information and generate variables for all inputs</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2625,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2023/01/statemachine-1024x478.jpg" alt="" class="wp-image-2625"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In my example, I need to set name "State Machine" in options of block. As you see, my stateMachine has "Level" input and water level is attached to this input. You can find all information on how to make such animations in the documentation of Rive App. </p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-fa054163-bea7","type":"download"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-fa054163-bea7" id="gspb_infoBox-id-gsbp-fa054163-bea7"><div class="gs-box download_type icon_type"><div class="gs-box-icon"><svg viewBox="0 0 612 612"> <g> <g> <g> <path d="M403.939,295.749l-78.814,78.833V172.125c0-10.557-8.568-19.125-19.125-19.125c-10.557,0-19.125,8.568-19.125,19.125 v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.478-7.478,19.584,0,27.042l108.19,108.19 c4.59,4.59,10.863,6.005,16.812,4.953c5.929,1.052,12.221-0.382,16.811-4.953l108.19-108.19c7.478-7.478,7.478-19.583,0-27.042 C423.523,288.29,411.417,288.29,403.939,295.749z M306,0C137.012,0,0,136.992,0,306s137.012,306,306,306s306-137.012,306-306 S475.008,0,306,0z M306,573.75C158.125,573.75,38.25,453.875,38.25,306C38.25,158.125,158.125,38.25,306,38.25 c147.875,0,267.75,119.875,267.75,267.75C573.75,453.875,453.875,573.75,306,573.75z"></path> </g> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Here is also <a href="https://rive.app/community/715-6730-water-bar-demo/" target="_blank" rel="noreferrer noopener">Rive file for investigation</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="using-interaction-layers-with-rive">Using Interaction Layers with Rive</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To connect site and Rive block, you can use script snippets and also Interaction layers.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-f5c0d63a-eb2a","width":["300px",null,null,null],"originalWidth":590,"originalHeight":1194,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2023/01/riveiter.png","mediaid":4291,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-f5c0d63a-eb2a" id="gspb_image-id-gsbp-f5c0d63a-eb2a"><img src="https://greenshiftwp.com/wp-content/uploads/2023/01/riveiter.png" data-src="" alt="" loading="lazy" width="300px" height="1194"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-d869f620-4bb6","type":"blue","spacing":{"margin":{"values":{"top":["30px"]},"locked":false},"padding":{"values":{},"locked":false}},"blockVisibility":{"query_by":"custom_meta","custom_field_key":"learning_url","custom_field_compare":"exist"}} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-d869f620-4bb6" id="gspb_infoBox-id-gsbp-d869f620-4bb6"><div class="gs-box blue_type "><div class="gs-box-icon"></div><div class="gs-box-text"><!-- wp:greenshift-blocks/container {"id":"gsbp-da0fdb36-a0a1","flexbox":{"flexDirection":["row",null,null,"column"],"type":"flexbox","justifyContent":["space-between"],"alignItems":["center",null,null,"stretch"],"columngap":["10px"],"rowgap":["10px"]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-da0fdb36-a0a1" id="gspb_container-id-gsbp-da0fdb36-a0a1"><!-- wp:greenshift-blocks/text {"id":"gsbp-bdc80962-3dff","inlineCssStyles":"","textContent":"Find more about Interaction Layers"} -->
<div id="gspb_text-id-gsbp-bdc80962-3dff" class="gspb_text gspb_text-id-gsbp-bdc80962-3dff ">Find more about Interaction Layers</div>
<!-- /wp:greenshift-blocks/text -->

<!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-47b5b3d8-9bb6","buttonContent":"View Documentation","background":{"backgroundState":"Gradient","gradient":"linear-gradient(135deg,rgb(64,129,246) 0%,rgb(128,104,250) 18%,rgb(255,128,170) 38%,rgb(255,103,88) 56%,rgb(255,101,24) 65%,rgb(255,177,36) 100%)"},"spacing":{"margin":{"values":{},"locked":false},"padding":{"values":{"top":["5px"],"bottom":["5px"],"right":["15px"],"left":["15px"]},"locked":false}},"typography":{"textShadow":{},"size":["16px"]},"buttonLink":"https://greenshiftwp.com/documentation/greenshift-extra/interaction-panels/","linkNewWindow":true,"enableIcon":true,"iconBox_icon":{"icon":{"font":"rhicon rhi-play","svg":"","image":""},"fill":"currentColor","fillhover":"","type":"font"},"dynamicEnable":false,"dynamicField":"learning_url","dynamicPostType":"documentation","dynamicType":"meta"} -->
<div class="gspb_button_wrapper gspb_button-id-gsbp-47b5b3d8-9bb6" id="gspb_button-id-gsbp-47b5b3d8-9bb6"><a class="wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button" href="https://greenshiftwp.com/documentation/greenshift-extra/interaction-panels/" 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="M848.8 429.4l-704-416.2c-57.2-33.8-144.8-1-144.8 82.6v832.2c0 75 81.4 120.2 144.8 82.6l704-416c62.8-37 63-128.2 0-165.2zM96 907v-790c0-9.2 10.2-15 18.2-10.4l668.4 395c7.8 4.6 7.8 16 0 20.6l-668.4 395.2c-8 4.6-18.2-1.2-18.2-10.4z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">View Documentation</span></span></span></a></div>
<!-- /wp:greenshift-blocks/buttonbox --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-25428ff8-9e5c","type":"blue","custombg":true,"customborder":true,"color":"#ffffff","background":{"color":"#000000"},"spacing":{"margin":{"values":{"top":["30px"]},"locked":false},"padding":{"values":{},"locked":false}},"border":{"borderRadius":{"values":{},"locked":true},"style":{},"size":{"left":[3]},"color":{"left":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary, #7000f4)"]},"styleHover":{},"sizeHover":{},"colorHover":{}},"blockVisibility":{"query_by":"custom_meta","custom_field_key":"learning_url","custom_field_compare":"exist"}} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-25428ff8-9e5c" id="gspb_infoBox-id-gsbp-25428ff8-9e5c"><div class="gs-box blue_type "><div class="gs-box-icon"></div><div class="gs-box-text"><!-- wp:greenshift-blocks/container {"id":"gsbp-ffc6c780-338b","flexbox":{"flexDirection":["row",null,null,"column"],"type":"flexbox","justifyContent":["space-between"],"alignItems":["center",null,null,"stretch"],"columngap":["10px"],"rowgap":["10px"]}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-ffc6c780-338b" id="gspb_container-id-gsbp-ffc6c780-338b"><!-- wp:greenshift-blocks/text {"id":"gsbp-67dfa074-c33d","inlineCssStyles":"","textContent":"Find an example in Fancy Academy"} -->
<div id="gspb_text-id-gsbp-67dfa074-c33d" class="gspb_text gspb_text-id-gsbp-67dfa074-c33d ">Find an example in Fancy Academy</div>
<!-- /wp:greenshift-blocks/text -->

<!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-7214067e-7044","buttonContent":"Visit Academy","background":{"backgroundState":"Gradient","gradient":"linear-gradient(135deg,rgb(64,129,246) 0%,rgb(128,104,250) 18%,rgb(255,128,170) 38%,rgb(255,103,88) 56%,rgb(255,101,24) 65%,rgb(255,177,36) 100%)"},"spacing":{"margin":{"values":{},"locked":false},"padding":{"values":{"top":["5px"],"bottom":["5px"],"right":["15px"],"left":["15px"]},"locked":false}},"typography":{"textShadow":{},"size":["16px"]},"buttonLink":"https://greenshiftwp.com/fancy/confetti-on-button-click/","linkNewWindow":true,"enableIcon":true,"iconBox_icon":{"icon":{"font":"rhicon rhi-play","svg":"","image":""},"fill":"currentColor","fillhover":"","type":"font"},"dynamicEnable":false,"dynamicField":"learning_url","dynamicPostType":"documentation","dynamicType":"meta"} -->
<div class="gspb_button_wrapper gspb_button-id-gsbp-7214067e-7044" id="gspb_button-id-gsbp-7214067e-7044"><a class="wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button" href="https://greenshiftwp.com/fancy/confetti-on-button-click/" 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="M848.8 429.4l-704-416.2c-57.2-33.8-144.8-1-144.8 82.6v832.2c0 75 81.4 120.2 144.8 82.6l704-416c62.8-37 63-128.2 0-165.2zM96 907v-790c0-9.2 10.2-15 18.2-10.4l668.4 395c7.8 4.6 7.8 16 0 20.6l-668.4 395.2c-8 4.6-18.2-1.2-18.2-10.4z"></path></svg></span><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Visit Academy</span></span></span></a></div>
<!-- /wp:greenshift-blocks/buttonbox --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="rive-inputs-and-examples">Rive Inputs and examples</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>RiveApp currently has several input types: number, boolean (true/false) and trigger.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want to change value of input, use next</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>//change number
stateMachineInput1880.value = 30;

//change boolean
stateMachineInput1880.value = true;

//dispatch trigger
stateMachineInput1880.fire();</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Additionally, we added global variable for whole Rive instance. In practical side, you may want to use it in next way (when state is changed, do something in your script)</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>RIVE423.onStateChange = (event) => {
    //get event data and use it in your scripts
    //event.data
};</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This is another practical example. In this animation, our input blends between different animations. Here we use value from our Input and check it, then, we switch our input value which changes animation in Rive. Good way to extend your forms if you have basic  javascript knowledge. Try to set Age < 20 or > 55.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/row {"id":"gsbp-d2b23238-d2cc","align":"full","gutterClassName":"gspb_row\u002d\u002dgutter-custom-0","rowLayout":"2","width":[960,null,null,null],"displayStyles":false,"background":{"color":"#18181b"},"spacing":{"margin":{"values":{"top":[30],"bottom":[30]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":["6","4",null,"2.5"],"bottom":["6","4",null,"2.5"],"right":["2","1.5",null,"1"],"left":["2","1.5",null,"1"]},"unit":["rem","rem","px","rem"],"locked":false}},"columnGapNew":100,"rowGap":[50,null,null,null]} -->
<div class="wp-block-greenshift-blocks-row alignfull gspb_row gspb_row-id-gsbp-d2b23238-d2cc gspb_row--gutter-custom-0" id="gspb_row-id-gsbp-d2b23238-d2cc"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-bbc2dc8f-0e56","gutterclass":"gspb_row\u002d\u002dgutter-100","flexbox":{"enable":false,"marginUnit":["px","px","px","px"],"marginLock":false,"marginTop":[null,null,null,null],"marginBottom":[null,null,null,null],"marginLeft":[null,null,null,null],"marginRight":[null,null,null,null],"type":"flexbox","justifyContent":["flex-start"],"flexDirection":["column"]},"columnSize":"6","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":["1.3",0],"right":[0],"bottom":["1.3",0],"left":[0]},"unit":["rem","rem","px","rem"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-bbc2dc8f-0e56" id="gspb_col-id-gsbp-bbc2dc8f-0e56"><!-- wp:greenshift-blocks/heading {"id":"gsbp-0e9731fc-07fc","headingContent":"Use Rive with Greenshift API to improve forms","typography":{"textShadow":{},"color":"#ffffff","sizeUnit":"rem","size":[3,2.3,null,1.9],"customweight":"custom","customweightnumber":700,"lineHeightUnit":["rem","rem"],"line_height":[3,2.5,null,2.2]}} -->
<h2 id="gspb_heading-id-gsbp-0e9731fc-07fc" class="gspb_heading gspb_heading-id-gsbp-0e9731fc-07fc ">Use Rive with Greenshift API to improve forms</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code><script>
    function changeMyage(value){
        if(value <20){
            stateMachineInput96a0.value = 0;
        }else if(value >=20 && value < 55){
            stateMachineInput96a0.value = 1;
        }else{
            stateMachineInput96a0.value = 2;
        }
    }
</script>
<input type="number" min="1" max="100" value="20" onchange="changeMyage(this.value)"/></code></pre>
<!-- /wp:code --></div>
<!-- /wp:greenshift-blocks/row-column -->

<!-- wp:greenshift-blocks/row-column {"id":"gsbp-90898490-eddf","gutterclass":"gspb_row\u002d\u002dgutter-100","columnSize":"6","background":{"color":"#ffffff"},"border":{"borderRadius":{"values":{"topLeft":"6","topRight":"6","bottomRight":"6","bottomLeft":"6"},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":["2.5"],"right":["2.5"],"bottom":["2.2"],"left":["2.5"]},"unit":["rem","px","px","px"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_col-id-gsbp-90898490-eddf" id="gspb_col-id-gsbp-90898490-eddf"><!-- wp:greenshift-blocks/heading {"id":"gsbp-168db7a1-9ac3","headingTag":"h3","headingContent":"REGISTER WITH FORM","typography":{"textShadow":{},"customweight":"custom","customweightnumber":600,"sizeUnit":"rem","lineHeightUnit":["rem"],"size":[0.8],"line_height":[1],"letter_spacing":[1.6],"color":"#7c3aed"}} -->
<h3 id="gspb_heading-id-gsbp-168db7a1-9ac3" class="gspb_heading gspb_heading-id-gsbp-168db7a1-9ac3 ">REGISTER WITH FORM</h3>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/heading {"id":"gsbp-168c304d-8d0a","headingContent":"Chose age","spacing":{"margin":{"values":{"top":[0]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"color":"","sizeUnit":"rem","size":[3,2.3,null,1.9],"customweight":"custom","customweightnumber":700,"lineHeightUnit":["rem","rem"],"line_height":[3,2.5,null,2.2]}} -->
<h2 id="gspb_heading-id-gsbp-168c304d-8d0a" class="gspb_heading gspb_heading-id-gsbp-168c304d-8d0a ">Chose age</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/rive {"source":"https://greenshiftwp.com/wp-content/uploads/2023/01/skills_square.riv","width":["350px",null,null,"300px"],"height":["350px",null,null,"300px"],"id":"gsbp-dea7c4a1-1088","snap":true,"artboard":"","statemachine":"skill-controller","riveid":"96a"} -->
<div class="wp-block-greenshift-blocks-rive gs-riveloader gspb_id-gsbp-dea7c4a1-1088"><canvas id="gspb_id-gsbp-dea7c4a1-1088" data-id="96a" data-src="https://greenshiftwp.com/wp-content/uploads/2023/01/skills_square.riv" background="#ffffff00" width="350px" height="350px" data-autoplay="true" data-statemachine="skill-controller" data-cover="cover"></canvas><img src="https://greenshiftwp.com/wp-content/plugins/greenshiftgsap/libs/rive/loading.svg" alt="" width="350px" height="350px" style="pointer-events:none"/></div>
<!-- /wp:greenshift-blocks/rive -->

<!-- wp:html -->
<script>
function changeMyage(value){
if(value <20){
stateMachineInput96a0.value = 0;
}else if(value >=20 && value < 55){
stateMachineInput96a0.value = 1;
}else{
stateMachineInput96a0.value = 2;
}
}
</script>
<input type="number" min="1" max="100" value="20" onchange="changeMyage(this.value)">
<!-- /wp:html -->

<!-- wp:greenshift-blocks/button {"id":"gsbp-b65291d8-64d3","buttonContent":"Get full access","align":"flex-start","background":{"backgroundState":"Gradient","backgroundHoverState":"Gradient","gradient":"linear-gradient(92deg,rgb(168,71,207) 1%,rgb(120,70,207) 46%,rgb(70,81,207) 97%)","backgroundMode":"hover"},"spacing":{"margin":{"values":{"bottom":[null],"top":["1.5"]},"unit":["rem","px","px","px"],"locked":false},"padding":{"values":{"top":["1"],"bottom":["1"],"right":["2.5"],"left":["2.5"]},"unit":["rem","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"iconSpacing":{"margin":{"values":{"left":[null]},"unit":["rem","px","px","px"],"locked":true},"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":[100],"unit":["%","px","px","px"]},"customHeight":{"value":[],"unit":["px","px","px","px"]},"widthType":"custom"},"typography":{"colorState":"Classic","sizeUnit":"rem","lineHeightUnit":["rem","px","px","px"],"textShadow":{"hShadow":"0","hShadow2":"","hShadow3":"","vShadow":"2","vShadow2":"","vShadow3":"","blur":"1","blur2":"","blur3":"","color":"#00000066","color2":"","color3":""},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","customweight":"custom","size":[1],"line_height":[1.5],"customweightnumber":600,"alignment":["center"]},"animation":{"duration":700,"easing":"ease","usegsap":false,"y":30,"rx":null,"s":0.5,"o":"0","type":""},"responsive":{"hideOnDesktop":false,"hideOnTablet":false,"hideOnMobile":false,"hideOnLandscape":false,"customcss":""},"csstransform":{"timebg":"","time":"","timeshadow":"","timeborder":"","timeopacity":"","timetransform":"","timecolor":"","timefilter":""},"buttonLink":"https://greenshiftwp.com/","linkNewWindow":true,"enableIcon":false,"iconRight":false,"iconBox_icon":{"icon":{"font":"rhicon rhi-arrow-right","svg":"","image":""},"fill":"#ffffff","fillhover":"#ffffff","type":"font"},"enableblockIcon":false} -->
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-b65291d8-64d3" id="gspb_button-id-gsbp-b65291d8-64d3"><a class="gspb-buttonbox" href="https://greenshiftwp.com/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Get full access</span></span></span></a></div>
<!-- /wp:greenshift-blocks/button -->

<!-- wp:greenshift-blocks/iconlist {"id":"gsbp-b0aad058-4ded","iconsList":[{"icon":{"icon":{"font":"rhicon rhi-lock-alt","svg":"","image":""},"fill":"#0000009e","fillhover":"","iconSize":["15px",null,null,null],"rotateY":false,"rotateX":false,"type":"font","strokeColor":"","strokeColorHover":"","strokeWidth":""},"content":"Select age to get access"}],"spacing":{"margin":{"values":{"top":["0.8"],"left":["-0.5"]},"unit":["rem","px","px","px"],"locked":false},"padding":{"values":{"top":[null],"right":[null],"bottom":[null],"left":[null]},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"color":"#71717a","size":[0.9],"sizeUnit":"rem","lineHeightUnit":["rem"],"line_height":[1.3]},"icon_spacing":{"margin":{"values":{"right":[5]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"responsive":{"customcss":"{GREENSHIFT}\n.gspb_iconsList__item__text {\n    margin: 0px;\n}\n"}} -->
<div class="wp-block-greenshift-blocks-iconlist gspb_iconsList gspb_iconsList-id-gsbp-b0aad058-4ded" id="gspb_iconsList-id-gsbp-b0aad058-4ded"><div class="gspb_iconsList__item" data-id="0"><svg class="" style="display:inline-block;vertical-align:middle" width="18" height="18" viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg"><path style="fill:#565D66" d="M448 824c-31 0-56-25-56-56v-128c0-31 25-56 56-56s56 25 56 56v128c0 31-25 56-56 56zM896 480v448c0 53-43 96-96 96h-704c-53 0-96-43-96-96v-448c0-53 43-96 96-96h64v-96c0-159 129.6-288.4 288.8-288s287.2 131.6 287.2 290.8v93.2h64c53 0 96 43 96 96zM256 384h384v-96c0-105.8-86.2-192-192-192s-192 86.2-192 192v96zM800 480h-704v448h704v-448z"></path></svg><span class="gspb_iconsList__item__text">Select age to get access</span></div></div>
<!-- /wp:greenshift-blocks/iconlist --></div>
<!-- /wp:greenshift-blocks/row-column --> </div></div>
<!-- /wp:greenshift-blocks/row -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-add2b378-a0c9","type":"download"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-add2b378-a0c9" id="gspb_infoBox-id-gsbp-add2b378-a0c9"><div class="gs-box download_type icon_type"><div class="gs-box-icon"><svg viewBox="0 0 612 612"> <g> <g> <g> <path d="M403.939,295.749l-78.814,78.833V172.125c0-10.557-8.568-19.125-19.125-19.125c-10.557,0-19.125,8.568-19.125,19.125 v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.478-7.478,19.584,0,27.042l108.19,108.19 c4.59,4.59,10.863,6.005,16.812,4.953c5.929,1.052,12.221-0.382,16.811-4.953l108.19-108.19c7.478-7.478,7.478-19.583,0-27.042 C423.523,288.29,411.417,288.29,403.939,295.749z M306,0C137.012,0,0,136.992,0,306s137.012,306,306,306s306-137.012,306-306 S475.008,0,306,0z M306,573.75C158.125,573.75,38.25,453.875,38.25,306C38.25,158.125,158.125,38.25,306,38.25 c147.875,0,267.75,119.875,267.75,267.75C573.75,453.875,453.875,573.75,306,573.75z"></path> </g> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p><a href="https://rive.app/community/3275-6897-skills-demo-v2/" target="_blank" rel="noreferrer noopener">Download file for investigation</a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:paragraph -->
<p>But let's go further. Here is another interesting example of how we can use different Layers of animation in Rive. In this example, we created several animations with character looking to one side (Left, Right, Down, Up). Then, we created Two layers of animation and attached Numeric inputs as Blend from Left to Right animation. And another input from Bottom to Top. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Also, we have another boolean input that enables Screaming Animation. So, we have two interactions here: mouth follow and Button trigger.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/row {"id":"gsbp-490a2a75-f7fc","align":"full","gutterClassName":"gspb_row\u002d\u002dgutter-custom-0","rowLayout":"2","brp_rowLayout":["30",null,null],"width":[1200,null,null,null],"displayStyles":false,"background":{"color":"#f4f4f5"},"spacing":{"margin":{"values":{"top":[30],"bottom":[30]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[8],"bottom":[8],"right":["2","1.5",null,"1"],"left":["2","1.5",null,"1"]},"unit":["rem","rem","px","rem"],"locked":false}},"columnGapNew":96,"rowGap":[null,40,null,null]} -->
<div class="wp-block-greenshift-blocks-row alignfull gspb_row gspb_row-id-gsbp-490a2a75-f7fc gspb_row--gutter-custom-0" id="gspb_row-id-gsbp-490a2a75-f7fc"><div class="gspb_row__content"> <!-- wp:greenshift-blocks/row-column {"id":"gsbp-866d7828-65a3","gutterclass":"gspb_row\u002d\u002dgutter-96","flexbox":{"enable":false,"marginUnit":["px","px","px","px"],"marginLock":false,"marginTop":[null,null,null,null],"marginBottom":[null,null,null,null],"marginLeft":[null,null,null,null],"marginRight":[null,null,null,null],"type":""},"columnSize":"6","brp_columnSize":["12",null,null],"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[0],"right":[0],"bottom":[0],"left":[0]},"unit":["px","px","px","px"],"locked":true}}} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_row__col--md-12 gspb_col-id-gsbp-866d7828-65a3" id="gspb_col-id-gsbp-866d7828-65a3"><!-- wp:greenshift-blocks/container {"id":"gsbp-9e803b88-072d","flexbox":{"enable":false,"marginUnit":["px","px","px","px"],"marginLock":false,"marginTop":[null,null,null,null],"marginBottom":[null,null,null,null],"marginLeft":[null,null,null,null],"marginRight":[null,null,null,null],"type":"flexbox","columngapUnit":["rem"],"columngap":[1.5],"flexDirection":["column"],"justifyContent":["flex-end"]},"background":{"color":"#e6e6e7"},"border":{"borderRadius":{"values":{"topLeft":"17","topRight":"17","bottomRight":"17","bottomLeft":"17"},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{"top":[null],"right":[null],"bottom":[null],"left":[null]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[null],"right":[null],"bottom":[null],"left":[null]},"unit":["rem","px","px","px"],"locked":false}},"minHeightUnit":["px","px","px","px"],"minHeight":[378,476,null,248]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-9e803b88-072d" id="gspb_container-id-gsbp-9e803b88-072d"><!-- wp:greenshift-blocks/rive {"source":"https://greenshiftwp.com/wp-content/uploads/2023/01/onicool.riv","width":["300px"],"height":["300px"],"id":"gsbp-c2760b09-e5a0","snap":false,"artboard":"","riveid":"531"} -->
<div class="wp-block-greenshift-blocks-rive gs-riveloader gspb_id-gsbp-c2760b09-e5a0"><canvas id="gspb_id-gsbp-c2760b09-e5a0" data-id="531" data-src="https://greenshiftwp.com/wp-content/uploads/2023/01/onicool.riv" background="#ffffff00" width="300px" height="300px" data-autoplay="true" data-statemachine="State Machine 1" data-cover="cover"></canvas><img src="https://greenshiftwp.com/wp-content/plugins/greenshiftgsap/libs/rive/loading.svg" alt="" width="300px" height="300px" style="pointer-events:none"/></div>
<!-- /wp:greenshift-blocks/rive --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-e980a8c8-cb8f","flexbox":{"enable":true,"marginUnit":["px","px","px","px"],"marginLock":false,"marginTop":[null,null,null,null],"marginBottom":[null,null,null,null],"marginLeft":[null,null,null,null],"marginRight":[null,null,null,null],"flexDirection":["row"],"justifyContent":["center"]},"spacing":{"margin":{"values":{"left":[0,null,null,0],"top":[-2],"right":[0,null,null,0],"bottom":[0]},"unit":["rem","px","px","rem"],"locked":false},"padding":{"values":{"top":[0],"right":[0],"bottom":[0],"left":[0]},"unit":["px","px","px","px"],"locked":true}}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-e980a8c8-cb8f" id="gspb_container-id-gsbp-e980a8c8-cb8f"><!-- wp:greenshift-blocks/container {"id":"gsbp-e1ef4b67-63df","flexbox":{"type":"flexbox","flexDirection":["row"],"justifyContent":["center"],"alignItems":["center"]},"background":{"color":"#ffffff"},"border":{"borderRadius":{"values":{"topLeft":"5","topRight":"5","bottomRight":"5","bottomLeft":"5"},"unit":"px","locked":true},"style":{},"size":{},"color":{},"styleHover":{},"sizeHover":{},"colorHover":{}},"spacing":{"margin":{"values":{"top":[null],"right":[null],"bottom":[null],"left":[null]},"unit":["rem","px","px","px"],"locked":true},"padding":{"values":{"top":["1.5"],"right":["2.5",null,null,2],"bottom":["1.5"],"left":["2.5",null,null,2]},"unit":["rem","px","px","px"],"locked":false},"marginAuto":[true]},"blockWidth":{"customWidth":{"value":[],"unit":["px","px","px","px"]},"customHeight":{"value":[],"unit":["px","px","px","px"]},"widthType":"custom","maxWidth":["380px"]},"width":[null,null,null,280],"widthUnit":["px","%","%","px"]} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-e1ef4b67-63df" id="gspb_container-id-gsbp-e1ef4b67-63df"><!-- wp:greenshift-blocks/text {"id":"gsbp-76a4fede-cf88","textContent":"RIVE","typography":{"textShadow":{},"sizeUnit":"rem","size":[2.3],"lineHeightUnit":["rem"],"line_height":[2.5],"customweight":"custom","customweightnumber":700,"color":"#2563eb"}} -->
<div id="gspb_text-id-gsbp-76a4fede-cf88" class="gspb_text gspb_text-id-gsbp-76a4fede-cf88 ">RIVE</div>
<!-- /wp:greenshift-blocks/text -->

<!-- wp:greenshift-blocks/text {"id":"gsbp-d3cbea7e-fda9","textContent":"Hover on image","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[0],"right":[0],"bottom":[0],"left":["1.5"]},"unit":["rem","px","px","px"],"locked":false}},"typography":{"textShadow":{},"sizeUnit":"rem","lineHeightUnit":["rem"],"size":[1.1],"line_height":[1.8],"customweight":"custom","customweightnumber":500,"color":"#000000"}} -->
<div id="gspb_text-id-gsbp-d3cbea7e-fda9" class="gspb_text gspb_text-id-gsbp-d3cbea7e-fda9 ">Hover on image</div>
<!-- /wp:greenshift-blocks/text --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/row-column -->

<!-- wp:greenshift-blocks/row-column {"id":"gsbp-3bb73da5-7081","gutterclass":"gspb_row\u002d\u002dgutter-96","flexbox":{"enable":false,"marginUnit":["px","px","px","px"],"marginLock":false,"marginTop":[null,null,null,null],"marginBottom":[null,null,null,null],"marginLeft":[null,null,null,null],"marginRight":[null,null,null,null],"flexDirection":["column"],"justifyContent":["flex-start"],"alignItems":["flex-start"],"type":""},"columnSize":"6","brp_columnSize":["12",null,null],"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[null],"right":[null,0],"bottom":[null],"left":[null,0]},"unit":["rem","px","px","px"],"locked":true}}} -->
<div class="wp-block-greenshift-blocks-row-column gspb_row__col--6 gspb_row__col--md-12 gspb_col-id-gsbp-3bb73da5-7081" id="gspb_col-id-gsbp-3bb73da5-7081"><!-- wp:greenshift-blocks/iconbox {"id":"gsbp-2d690014-0307","type":"boxed","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}},"background":{"color":"#ffffff"},"iconBox_icon":{"icon":{"font":"rhicon rhi-bolt-regular","svg":"","image":""},"fill":"#ff6f12","fillhover":"","type":"font","strokeColor":"","iconSize":["25px"],"strokeColorHover":"","strokeWidth":""}} -->
<div class="wp-block-greenshift-blocks-iconbox gspb_iconBox gspb_iconBox-id-gsbp-2d690014-0307" id="gspb_iconBox-id-gsbp-2d690014-0307"><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 -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-f74dcb5e-90da","spacing":{"margin":{"values":{"top":["2.5","2.5"]},"unit":["rem","rem","px","px"],"locked":false},"padding":{"values":{"top":[null],"right":[null],"bottom":[null],"left":[null]},"unit":["rem","px","px","px"],"locked":true}}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-f74dcb5e-90da" id="gspb_container-id-gsbp-f74dcb5e-90da"><!-- wp:greenshift-blocks/heading {"id":"gsbp-491947c9-41bd","headingContent":"Build a perfect landings with Greenshift.","typography":{"textShadow":{},"customweight":"custom","customweightnumber":700,"sizeUnit":"rem","size":[3,2.3,null,1.9],"lineHeightUnit":["rem"],"line_height":[3.4,2.5]}} -->
<h2 id="gspb_heading-id-gsbp-491947c9-41bd" class="gspb_heading gspb_heading-id-gsbp-491947c9-41bd ">Build a perfect landings with Greenshift.</h2>
<!-- /wp:greenshift-blocks/heading -->

<!-- wp:greenshift-blocks/text {"id":"gsbp-850356b6-a756","textContent":"Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia conse duis enim velit mollit. Exercitation veniam.","spacing":{"margin":{"values":{"top":["1.5"]},"unit":["rem","px","px","px"],"locked":false},"padding":{"values":{},"unit":["px","px","px","px"],"locked":false}},"typography":{"textShadow":{},"sizeUnit":"rem","size":[1.1],"lineHeightUnit":["rem"],"line_height":[1.6]}} -->
<div id="gspb_text-id-gsbp-850356b6-a756" class="gspb_text gspb_text-id-gsbp-850356b6-a756 ">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia conse duis enim velit mollit. Exercitation veniam.</div>
<!-- /wp:greenshift-blocks/text --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/button {"id":"gsbp-12583460-6f5a","buttonContent":"Click on button","align":"flex-start","background":{"backgroundState":"Gradient","backgroundHoverState":"Gradient","gradient":"linear-gradient(92deg,rgb(168,71,207) 1%,rgb(120,70,207) 46%,rgb(70,81,207) 97%)","backgroundMode":"hover"},"spacing":{"margin":{"values":{"bottom":[null],"top":["2.2"]},"unit":["rem","px","px","px"],"locked":false},"padding":{"values":{"top":["1"],"bottom":["1"],"right":["2.5"],"left":["2.5"]},"unit":["rem","px","px","px"],"locked":false},"overflow":[null,null,null,null]},"iconSpacing":{"margin":{"values":{"left":[null]},"unit":["rem","px","px","px"],"locked":true},"padding":{"values":{},"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":{"colorState":"Classic","sizeUnit":"rem","lineHeightUnit":["rem","px","px","px"],"textShadow":{"hShadow":"0","hShadow2":"","hShadow3":"","vShadow":"2","vShadow2":"","vShadow3":"","blur":"1","blur2":"","blur3":"","color":"#00000066","color2":"","color3":""},"fluidSizeMin":"1.5rem","fluidSizeMax":"2.1rem","fluidSizePerfect":"1.7vw","fluidLineMin":"2rem","fluidLineMax":"2.5rem","fluidLinePerfect":"2.1vw","customweight":"custom","size":[1],"line_height":[1.5],"customweightnumber":600},"animation":{"duration":700,"easing":"ease","usegsap":false,"y":30,"rx":null,"s":0.5,"o":"0","type":""},"responsive":{"hideOnDesktop":false,"hideOnTablet":false,"hideOnMobile":false,"hideOnLandscape":false,"customcss":""},"buttonLink":"#","linkNewWindow":false,"enableIcon":false,"iconRight":false,"iconBox_icon":{"icon":{"font":"rhicon rhi-arrow-right","svg":"","image":""},"fill":"#ffffff","fillhover":"#ffffff","type":"font"},"enableblockIcon":false,"className":"btncry"} -->
<div class="wp-block-greenshift-blocks-button gspb_button_wrapper gspb_button-id-gsbp-12583460-6f5a btncry" id="gspb_button-id-gsbp-12583460-6f5a"><a class="gspb-buttonbox" href="#" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Click on button</span></span></span></a></div>
<!-- /wp:greenshift-blocks/button -->

<!-- wp:html -->
<script>
    window.addEventListener("mousemove", e => {
if(typeof stateMachineInput5311 != 'undefined'){
stateMachineInput5311.value = (e.clientX/window.innerWidth)*100;
stateMachineInput5312.value = 100-((e.clientY/window.innerHeight)*100);
}
});

let btn = document.querySelector('.btncry');
btn.onclick = (e)=>{
e.preventDefault();
if(stateMachineInput5310.value == true){
stateMachineInput5310.value = false;
}else{
stateMachineInput5310.value = true;
}

}
</script>
<!-- /wp:html --></div>
<!-- /wp:greenshift-blocks/row-column --> </div></div>
<!-- /wp:greenshift-blocks/row -->

<!-- wp:paragraph -->
<p>Code for this script</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code><script>
    //Mouse follow feature
    window.addEventListener("mousemove", e => {
        if(typeof stateMachineInput5311 != 'undefined'){
            stateMachineInput5311.value = (e.clientX/window.innerWidth)*100;
            stateMachineInput5312.value = 100-((e.clientY/window.innerHeight)*100);
        }
    });

    let btn = document.querySelector('.btncry');
    btn.onclick = (e) => {
        e.preventDefault();
        if(stateMachineInput5310.value == true){
            stateMachineInput5310.value = false;
        }else{
            stateMachineInput5310.value = true;
        }
    }
</script></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>By the way, Rive app has Motion follow effect, but it will work only inside container of Rive. So, we made custom cursor effect for whole window which will trigger animation of Rive via inputs</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-b9bb9985-0cf7","type":"download","spacing":{"margin":{"values":{"top":[70]},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"right":[null]},"unit":["px","px","px","px"],"locked":false}},"position":{"positionType":["relative","","",""],"positions":{"values":{}}}} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-b9bb9985-0cf7" id="gspb_infoBox-id-gsbp-b9bb9985-0cf7"><div class="gs-box download_type icon_type"><div class="gs-box-icon"><svg viewBox="0 0 612 612"> <g> <g> <g> <path d="M403.939,295.749l-78.814,78.833V172.125c0-10.557-8.568-19.125-19.125-19.125c-10.557,0-19.125,8.568-19.125,19.125 v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.478-7.478,19.584,0,27.042l108.19,108.19 c4.59,4.59,10.863,6.005,16.812,4.953c5.929,1.052,12.221-0.382,16.811-4.953l108.19-108.19c7.478-7.478,7.478-19.583,0-27.042 C423.523,288.29,411.417,288.29,403.939,295.749z M306,0C137.012,0,0,136.992,0,306s137.012,306,306,306s306-137.012,306-306 S475.008,0,306,0z M306,573.75C158.125,573.75,38.25,453.875,38.25,306C38.25,158.125,158.125,38.25,306,38.25 c147.875,0,267.75,119.875,267.75,267.75C573.75,453.875,453.875,573.75,306,573.75z"></path> </g> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:greenshift-blocks/container {"id":"gsbp-68526564-6a0c","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"right":[140]},"unit":["px","px","px","px"],"locked":false}}} -->
<div class="wp-block-greenshift-blocks-container gspb_container gspb_container-gsbp-68526564-6a0c" id="gspb_container-id-gsbp-68526564-6a0c"><!-- wp:paragraph {"className":"downloadlinks"} -->
<p class="downloadlinks"><a href="https://rive.app/community/2440-4910-eye-tracking/" target="_blank" rel="noreferrer noopener">Investigate Eye tracking animation</a> and <a href="https://rive.app/community/3507-7424-naridon-oni-fan-art/" target="_blank" rel="noreferrer noopener">Character animation</a></p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/rive {"source":"https://greenshiftwp.com/wp-content/uploads/2023/01/bird.riv","width":["150px"],"height":["250px"],"id":"gsbp-2c9e1874-40b4","position":{"positionType":["absolute","","",""],"positions":{"values":{"bottom":["0px"],"right":["-15px"]}}},"snap":false,"artboard":"","riveid":"2b3"} -->
<div class="wp-block-greenshift-blocks-rive gs-riveloader gspb_id-gsbp-2c9e1874-40b4"><canvas id="gspb_id-gsbp-2c9e1874-40b4" data-id="2b3" data-src="https://greenshiftwp.com/wp-content/uploads/2023/01/bird.riv" background="#ffffff00" width="150px" height="250px" data-autoplay="true" data-statemachine="State Machine 1" data-cover="cover"></canvas><img src="https://greenshiftwp.com/wp-content/plugins/greenshiftgsap/libs/rive/loading.svg" alt="" width="150px" height="250px" style="pointer-events:none"/></div>
<!-- /wp:greenshift-blocks/rive --></div>
<!-- /wp:greenshift-blocks/container --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:html -->
<script>
let triggerbird = document.querySelectorAll('.downloadlinks a');
triggerbird.forEach((item) =>{
item.onclick = (e) => {
e.preventDefault();
let href = item.getAttribute("href");
stateMachineInput2b30.fire();
setTimeout(function () {
window.open(href, '_blank');
}, 1200);
}
});
</script>
<!-- /wp:html -->

<!-- wp:code -->
<pre class="wp-block-code"><code><script>
//Code for Jumping bird before Link click
let triggerbird = document.querySelectorAll('.downloadlinks a');
triggerbird.forEach((item) =>{
item.onclick = (e) => {
e.preventDefault();
let href = item.getAttribute("href");
stateMachineInput2b30.fire();
setTimeout(function () {
window.open(href, '_blank');
}, 1200);
}
});
</script></code></pre>
<!-- /wp:code -->