API | Pinegrow Web Editor

API

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_name_or_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_name_or_index corresponds to the name (or index) of the Interaction as defined in the Interactions action. The index starts 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.

Examples

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, 'MyAnimation');
});

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, 'MyAnimation', data);

Pause the animation

pgia.pause(element, animation_name_or_index);

pgia.pause pauses one of the animations defined by Interactions action.

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

animation_name_or_index corresponds to the name (or index) of the Interaction as defined in the Interactions action. The index starts with 1.

Seek the animation

pgia.seek(element, animation_name_or_index, progress, play);

pgia.seek seeks to the progress of the animation, defined by Interactions action.

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

animation_name_or_index corresponds to the name (or index) of the Interaction as defined in the Interactions action. The index starts with 1.

progress from 0 to 1.

play should be true if the animation should continue playing.

Recreate the animation

pgia.recreate(element, animation_name_or_index);

pgia.recreate destroys the existing animation and creates it anew the next time it is played. This is useful if the animation targets selectors that should be re-evaluated on the next play.

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

animation_name_or_index corresponds to the name (or index) of the Interaction as defined in the Interactions action. The index starts with 1.



Last updated on December 1, 2020 at 4:07 am


Print this article