# BarbaJS Page Transitions disables all PG Interactions

**URL:** <https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [April 22, 2021, 9:38pm UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224 "2021-04-22T21:38:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![zappapa](https://avatars.discourse-cdn.com/v4/letter/z/5e9695/32.png) [@zappapa](https://forum.pinegrow.com/u/zappapa)\
**Post date:** [April 22, 2021, 9:38pm UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/1 "2021-04-22T21:38:24Z")

</div>

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”.

Any ideas?

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [April 23, 2021, 8:11am UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/2 "2021-04-23T08:11:58Z")

</div>

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.

But I could be wrong on the latter.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [April 23, 2021, 9:56am UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/3 "2021-04-23T09:56:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [April 23, 2021, 8:16pm UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/5 "2021-04-23T20:16:56Z")

</div>

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:

```auto
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.

 ![Screen Shot 2021-04-24 at 1.37.19 AM](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f9c18ee5f5d4805f1181db3303fdaa75be9fc09d.png)

---

<div class="post-metadata">

**Author:** ![zappapa](https://avatars.discourse-cdn.com/v4/letter/z/5e9695/32.png) [@zappapa](https://forum.pinegrow.com/u/zappapa)\
**Post date:** [April 24, 2021, 1:21pm UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/6 "2021-04-24T13:21:41Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [April 24, 2021, 5:44pm UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/7 "2021-04-24T17:44:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [April 25, 2021, 8:59am UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/8 "2021-04-25T08:59:35Z")

</div>

Very nice! Thanks @abirana

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [April 25, 2021, 9:06am UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/9 "2021-04-25T09:06:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 29, 2022, 11:04am UTC](https://forum.pinegrow.com/t/barbajs-page-transitions-disables-all-pg-interactions/5224/10 "2022-01-29T11:04:48Z")

</div>

> [@abirana](#):
>
> pageTransition

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