API | Pinegrow Web Editor


Pinegrow Interactions comes with a simple API that lets you trigger animations from your code.

The API consists of a single function:

Play interaction animation

pgia.play(element, animation_index, [data]);

pgia.play plays one of the animations defined by Interactions action.

element is the HTML element where the animation should be played.

animation_index corresponds to the index of Interaction as defined in the Interactions action, starting with 1.

data is optional interactions definition as stored in data-pg-ia attribute. This data is used if Interactions action is not already defined on the target element.


Play animation 1 on the .popup element when the button.open is clicked:

var button = document.querySelector('button.open');
button.addEventListener('click', function(e){
    var el = document.querySelector('.popup');
    pgia.play(el, 1);

Get the interaction data from the existing element and use it to play animation on the newly created page element:

//Get the interactions data. Do this just once
var existing_item = document.querySelector('li.item');
var data = JSON.parse(existing_item.getAttribute('data-pg-ia'));

//Here a new item is created
var new_item = createNewItem();
pgia.play(new_item, 2, data);

Last updated on December 10, 2019 at 5:40 am

Print this article