# Page transition glitching

**URL:** https://forum.pinegrow.com/t/page-transition-glitching/6201
**Category:** Pinegrow Interactions Add-on
**Created:** [January 31, 2022, 8:33am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201 "2022-01-31T08:33:51Z")
**Posts on this page:** 7
**Page:** 1

<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 31, 2022, 8:33am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/1 "2022-01-31T08:33:52Z")

</div>

Hi, a new topic here to see if pinegrow interaction can be an alternative to barba. Make a test here and some glitching here. Can I avoid this or it is a limitation ? Thanks in advance  
[https://erikworkshop.fr/growinterac/fade.html](https://erikworkshop.fr/growinterac/fade.html)

---

<div class="post-metadata">

### Author: ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [January 31, 2022, 10:08am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/2 "2022-01-31T10:08:01Z")

</div>

Hi @erik-k

What you see is overflow happening and adding a scroll bar. Just add overflow hidden to the:  
`<header data-barba="container" style="overflow:hidden;" class="bg-primary" data-pg-ia='{"l":[{"name":"Fade in page","trg":"now","a":"fadeIn","d":"1"}]}'>`

Regards,

David

---

<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 31, 2022, 10:38am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/3 "2022-01-31T10:38:10Z")

</div>

Hi David,  
Thanks for the “overflow : hidden". I made the upgrade of the html file.  
No problem on Safari smooth and great 🙂but in Chrome and Firefox, some flashes of the fade.html during the transition ☹ Any help is welcome

---

<div class="post-metadata">

### Author: ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [January 31, 2022, 10:43am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/4 "2022-01-31T10:43:47Z")

</div>

Glad the scroll bar is gone. Move your body closing tag down to the HTML closing tag underneath the scripts please.  
The error is caused by Pinegrow moving the body to the wrong spot! Just to be sure that’s not causing the jump.

---

<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 31, 2022, 11:06am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/5 "2022-01-31T11:06:48Z")

</div>

Hi David,  
Changes are made but without success ☹

---

<div class="post-metadata">

### Author: ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)
#### Post date: [January 31, 2022, 11:08am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/6 "2022-01-31T11:08:27Z")

</div>

Yes because some code is missing! This should be in the head or elsewhere:

```auto
/* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='@media ' + pgia_small_mq + '{ html:not(.pg-ia-no-preview) [data-pg-ia-hide="mobile"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="mobile"] {opacity:1;visibility:visible;display:block;}}';pgcss+='@media ' + pgia_large_mq + '{html:not(.pg-ia-no-preview) [data-pg-ia-hide="desktop"] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show="desktop"] {opacity:1;visibility:visible;display:block;}}';style.innerHTML=pgcss;document.querySelector('head').appendChild(style);}}catch(e){console&&console.log(e);}})()

```

There is also some inline script code sudenly missing (the animation) on the pages. The slide!

I know the problem is caused by Interactions as soon as you start changing things.

---

<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 31, 2022, 11:24am UTC](https://forum.pinegrow.com/t/page-transition-glitching/6201/7 "2022-01-31T11:24:28Z")

</div>

Hi David,  
Thanks for support and your time, it works !!  
I continue my journey in pinegrow interaction 🙂  
I upgrade the files and it is possible to make the sliding effect only if the user click on the “Coming Back’ button and not when the file is open for the first time ?  
Best regards  
Erik
