I’m trying to create Page Transitions with the help of BarbaJS. The page transitions work but my PG Interactions (animations) don’t work when BarbaJS is used. Even animations that are triggered by a click don’t work.
Is it possible to use BarbaJS for page transitions and still make use of interactions? If so, how?
Is there another way to create page transitions in PineGrow? Ideally there would be an animation “trigger” that says “Page Leave” to work in conjunction with “Load - Immediately when created”.
Hi there, I think the animations plugin and Visual UI is designed to work solely with the Pinegrow licensed version of the Greensock JS animation library, which comes with the Animation plugin purchase.
I dont think the Visual UI even works with the Full Version Greensock JS animation library direct from them.
Hi @zappapa, @schpengle is correct. Barba.js requires that you manipulate your animation library through JS. This isn’t possible with Interactions. I’ll look into trying to replicate some on the functionality with Interactions, like “PageLeave”.
Cheers,
Bob
There is one way to achieve page transition in Pinegrow. Other animations can be easily done, one should be for when page loads and another should be for clicking the link (Page Leave animation).
Main thing we need is to redirect current page to another page. For this we can write a short JS function as below:
function pageTransition(args) {
let pageLink = args.href;
if (pageLink) {
pageTrigger = setTimeout(function(){
window.location.href = pageLink;
}, 1000);
}
}
This function helps to change the page, you can write this inside your .js file. Now we just need to call this function using click interaction.
For this create an interaction for the link,
Set trigger to Click on…
Enable Prevent Default Action on Advanced options
Click Edit Animation
In the timeline editor, for Selector select the your animating element/block and apply animation as required. This is your Page Leave animation so I’m not explaining the animation part
Now add another timeline > for Selector select the link itself (this is necessary to get the href value)
Now you just need call our function, for this add a new transition and for Type select Set
For position set it to 0.3
Click on Add Property > Interactions > On Complete (this way we can call our custom JS functions)
In the field type our function name pageTransition
Please check the screenshot below, which might make a it more clear.
Do let me know if there is anything.
Wow Amazing! This is exactly what I was looking for. I almost gave up on Pinegrow… Now I don’t need Barba or anything else anymore, at least for now. I love Pinegrow and I love this forum. Thanks a lot!
Glad to help, Barba.js seems to work quite differently.
Pinegrow Interactions is quite powerful, but like in any other platform if you need something quite different you need to develop something custom. Best thing with Pinegrow is that we can easily use those custom functions.
Hey @zappapa could you please share a link or video to see the transition you achieved. I usually save examples for when I need them in future projects. Thanks.
Hi, thanks for the trick and I continue to discover pinegrow interaction. I make a slide transition between 2 pages but when I click there’s a blank screen before the second page appears. How can I preload the second page ? Thanks in advance
