Greenshift WordPress
Download

Rive app WordPress addon

Blog Staff

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 creation 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.

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

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

I used HTML block to add custom scripts and HTML to page

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

To make this feature to work, your rive app must have enabled StateMachine. See documentation of StateMachine. Also, it’s important to provide stateMachine name in options of block, so, Greenshift can retrieve information and generates 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.

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

Select age to get access

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.

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

<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
Copy code below, and paste it (CTRL+V) in content of page

«
»