Instantiate Pinegrow Interactions from JavaScript

Is there a way to manually trigger Pinegrow interactions on a page?

I’m adding transitions between pages via an ajax function to fetch the page content and populate the body underneath a transition.

The only problem I’m having is that none of the interactions run on the ‘new’ page. Is there a way to trigger all the interactions on this page? I’ve tried re-loading the library and re-adding it to the page and looping through all the elements that contain an interaction and using the API to play.

Any other ideas welcome or some direct integration with the JS or API.

Hi @fakesamgregory,
As far as I know, the only way would be to loop through all of the elements with interactions and call the play function as is shown in the API documentation.
Bob

Thanks @bob! Yeah I did that but it doesn’t work :(. Closest I got was using seek with ‘continue playing’ flag. This just put some of the animations to the beginning but they don’t play. This also doesn’t include scroll or load animations.

Mind providing me with some code? I can play around a little and see if I can get it working with your animations. Hmmmm… thinking about it - recreating the ajax calls on my end might be a bit steep set-up wise. Well, I guess trying out a fake load with a couple of your animations might be enough.

@RobM @fakesamgregory

Hi Bob & Samuel,

Sounds like the problem I had on a Ajaxify website with the Interaction text animation in the Bootstrap 5 slider you helped me with Bob! And I added a fade animation in the scroll top icon that works on every page with Interactions and Ajax.

https://www.360zuid.nl/ Click to 360zuid > “Sociale innovatie” to see the interaction on page load with Ajax working for the fetching of the pages.

It is a pure Javascript solution (no jQuery used). Code is at the bottom of the page with the Bootstrap 5 slider.

David

Looks like you still have access @RobM. check the bottom of scripts.js

Hi @fakesamgregory,
So… Our documentation needs a little update. My first response to you was incorrect - why do I ever doubt the Matjaz!
You can probably optimize slightly more, but I replaced the area in the timeout with:

setTimeout(() => {
            let el = $main.get(0);
            pgia.elementAnimationsManager.refreshAnimations(el, true);
            pgia.scrollSceneManager.updateScene(el, true);

            loadJs();

This takes care of both the [data-pg-ia] and the [data-pg-ia-scene] animations.
Let me know if I can help further.
Bob

@RobM this works perfectly!! It unfortunately doesn’t work on page load interactions but in my case I’d prefer to change them to play immediately.

Hi @fakesamgregory,
I’m going to be updating the docs, so I want to make sure I understand. Which animations aren’t running (specific class/id on the page, if you don’t mind)?
Sorry for the troubles,
Bob

@RobM theres no specific Id/class. It’s any animation that I had set to trigger on page load.