[SOLVED] PG Interactions - Scroll Scene issue

Hi guys, i have a problem with the scroll scene. Sometimes it works, sometimes it doesn’t…why is it so?! i thought i might be doing something wrong, but it seems to go randomly, applying the effect to some elements and not to some others. I tried selecting the most “parent” container, and then working on the childrens, nope, tried with $.element and still, it works for few elements, then no more. I leave you the screen record, maybe someone can tell me if i’m doing something wrong…
@AllMediaLab @matjaz

could it be due to the position:relative? i just found out that those element that has this positioning are the ones that don’t work, strangely, when i commented out the rule, things starts to work, but i have to deep more in this one…

Ok, so far i was able to prove my doubt. That’s the scenario:
a. The container is set to relative
b. the child element “p” don’t work with scroll scene.

So i switch off the relative rule [which in my case is needed because of an svg elemnt which i want to be positioned absolutely relatively to it] and it seems to be working now…

Question: is it like a normal behaviour or a bug?

@matjaz @Emmanuel @AllMediaLab

another “funny” thing is that i tried to upload to my server the web page and some of the scroll animations shows up like the one on the hero-intro but it does not show in PG…

:- ( argh

@tytusie the relative should not affect the Scroll Scene. Please send us the project to support@pinegrow.com and I will take a look.

Also, Direction = Auto detect sometimes doesn’t work well, try setting it to Vertical.

Hi Matjaz,

somehow i managed to “solve” the problem: i made a new project, copied and pasted first the html, and tried out some random scroll scenes on a non styled page, was working. then i added the old style.scss, without partials, still ok, and then when i added the reset.css (as before i started a plain html project with normalize) the first glitch started to happen, the scroll scene started to stope here and there (the progress bar i mean) so i just copied to a new partial the few rules i was interested in. And till now, things, sort of work (i say “sort of” because some of the scrol effects don’t show up on the mobile, but…i can partially be happy…). The only part where scroll scene before was working and then at some point is not any more, is a section were i have also the owlcarousel - but the container is outside the .owl-item …

To me, it seem like i have to try to reinstall PG and see if it helps, or maybe there’s some bug - but this i can’t say.

Anyway, if You have the chance to have a look at this issue I would be glad.
New page this is how it looks like till now…

1 Like

@matjaz Hello Matjaz, did You had the chance to inspect if there’s something wrong with Interactions in 6.8?

@tytusie thanks for all the updates and the project! I think I found the problem:

Scroll Scene tries to be smart and auto-detects the scroll parent of the element. That can be a viewport or a parent element with scrollable content.

But in this situation this fails, probably because the element has higher inner content height than its height.

The solution is to explicitly tell the Scroll Scene to use the viewport by setting the “…of the” field to “$body”.

We’ll probably have to switch off this auto detect logic because as shown here, it can lead to issues.

@matjaz :- )))))))))))))

Matjaz…maybe Scroll Scene tries to be smart, but You’re smarter! So so happy that You helped me, and hopefully we helped someone else reading this monologue of my project.

It works, and i’m so glad You took Your time to work it out.

Yeah…
:- )

3 Likes

I was just running into this issue yesterday. I’m so glad to see a workaround and a future fix!

2 Likes

Funny, this morning i was thinking about You, that maybe You could know any solution, and voilà, now You’re here on the boat :- )

2 Likes

@tytusie sometimes the simpler is better :slight_smile: Thank you for your patience and persistence with debugging this issue.

1 Like

it was driving me crazy, specially the fact that it was happening randomly, without any logic reason…i had the feeling it was something related to the styleshet, as when i was rebuilding the page, till the point i’ve attache the old styles, things were going ok, but the issue was caused as i see it now, by the scaed size of the rainbow ring wich was going off the page so maybe that was the start of the troubles for Scroll Scene. I ended up blaming the rule on the html{font-size: 62.5%} and hating my sef for setting up all the layout according to that variable, so i started [before you catch up the issue] rewriting it all again…and now, again - this time, happier as i know it’s worth it [and also because for once in my life, i made some sort of logic backups, so i just have to rebuild few new parts]