Rive app WordPress addon

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.

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

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">

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.

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.

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>