API

The Pinegrow Interactions API exposes a number of functions that allow you to manipulate both single animation events, as well as multiple animation and scene events.

Single interactions

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.

Multiple Interactions

The API exposes several functions if your page has multiple element or scene interactions that need to be played upon dynamic page load.

Managing multiple element animations

Interactions on individual elements are stored in the [data-pg-ia] attribute. These elements can be registered with the pgia.js script upon dynamic page reload using the elementAnimationsManager.

Reseting animations

pgia.elementAnimationsManager.refreshAnimations(element, descendants)

element should either be the body of the page, or individual section containing the animations to be reset.

descendants takes a boolean value. If true the refresh will apply to all of the descendants of the targeted element. A false value will apply the refresh only to the targeted element.

Example

Reset all the animations on the entire page

let el = document.body;
pgia.elementAnimationsManager.refreshAnimations(el, true);

Destroying all page animations

Animations can be removed from the entire page or individual sections using the destroyAnimations function.

pgia.elementAnimationsManager.destroyAnimations(element, descendants)

Example

Removing animations from a single section with the id animation-section.

let el = document.querySelector('#animation-section');
pgia.elementAnimationsManager.destroyAnimations(el, true);

Managing multiple scene interactions

Scroll scene interactions are added to elements on the page using the [data-pg-ia-scene] attribute. These are managed separately from the individual element interactions using the scrollSceneManager.

Resetting all scroll scene interactions

pgia.scrollSceneManager.updateScene(element, descendants)

element should either be the body of the page, or individual section containing the scroll scene to be reset.

descendants takes a boolean value where false will take action only on the targeted element, while true will apply the update to the element and all descendants.

Example

Reseting all of the scroll scene interactions.

let el = document.body;
pgia.scrollSceneManager.updateScene(el, true);

Removing scroll scene interactions

pgia.scrollSceneManager.removeScene(element, descendants)

Example

Removing the scroll scene interactions from a single section with the id scroll-section.

let el = document.querySelector('#scroll-section');
pgia.scrollSceneManager.removeScene(el, true);