Page transition glitching

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

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"}]}'>



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

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.

Hi David,
Changes are made but without success :frowning:

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

/* 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.

Hi David,
Thanks for support and your time, it works !!
I continue my journey in pinegrow interaction :slight_smile:
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