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.
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.
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
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
Hi everybody,
I’m new in the forum but I’m working with PG since 2019!
I wanna share my last experience with the interactions plugin-in.
In this project boschettocampacci.it there are few things named in this thread: ajax transitions, animations etc.
After the animations set up I start to implement barba.js (in love with it). I already use this js in several projects, but never mixed with PG’s interactions.
Following the documentation info I tried to trigger animations using the code explained. Unfortunately PG animations starts just with onWindow load or click event.
My workaround has been integrate few plain gsap animations and interact directly with them.
So, my question is: are there any other information we shoud know about how interact with interactions API?
Is there a correct way to call theme in custom code?
I was thinking about this yesterday actually. This is an area I’m creating some content on but I just haven’t figured it out yet.
Assuming you’ve tried pgia.elementAnimationsManager.refreshAnimations, pgia.scrollSceneManager.updateScene from the API documentation? I’ve never been able to get Barber or my own page transition scripts to work smoothly.
some quick informations about the project:
There were not enought time to deply it in the best way . Unfortunately I used the first working solutions.
The main error has been (as usual) to implement barba.js after layout and animations design.
When I start implement barba I found on PG website the docs about API. Unfortunately I just had moved every PGIA code from the inline implementation to an exported js file.
That solution was, at that moment and with my experience, the right way to interact with barba.
I tried several ways to re initialize PGIA animation trought barba, but none animationsManager or scrollScene were working.
The final solution has been to remove and then reload the pgia js files (library and exported animations) on every page transition… quite wired solution…
But, cause there’s always something not working in thoese case, the client wanted a transition animation. Something betwen pages.
I tried with PGIA to create a preloader and use pgia.play to let the animation start, but the only way to let it work was to add a click event or a window “something" trigger.
But…
The user hasn’t to click during a page transition.
The window element doesn’t make any event during the transition.
I tried to listen every DOM change event, with no results.
GSAP had already loaded, with few lines everything worked fine, so fortunately the project has been published on time for the deadline.
If the PGIA’s API could be called through costum code the barba implementation can become really straight and powerful, and all PG’ user can develop website on a next level.
. Unfortunately I used the first working solutions.