AntoineW/luge

Reveal doesn't trigger `is-in` state randomly

Closed this issue · 3 comments

DamChtlv commented

Hi @AntoineW,

First of all, really great lib!
I love the idea of having an animation toolkit :)

The issue i'm having is sometimes (kind of random sadly) the reveal mode doesn't work when i scroll over a <section> element which has data-lg-reveal attribute, luge doesn't seems to detect it.
It seems stuck on is-out state (as you can see in the video example below)

I managed to fix an issue i had related using luge.lifecycle.refresh() after clicking on an anchor link (which helped).
I also tried to use luge.lifecycle.refresh() on ready event with a little setTimeout because i suspected that some librairies that update the DOM (sliders for example) could mess with the way Luge is seeing the DOM and where it thinks the scroll position is.

Do you have any clue what is causing this?

Video: https://www.loom.com/share/33967a005bae40efbd6ac4d9f889db91?t=3

Thanks in advance for your response / time

AntoineW commented

Hi,
Thanks for your feedback 🙏

Could you try to resize the viewport before scrolling to see if it helps? If so, it would mean the DOM was updated after your timeout function. That could be because some elements take longer to initialize (like the sliders), or image sizes are not set, and they are loaded after luge initialisation.

DamChtlv commented

Thanks for the fast reply :)

I tried resizing and scrolling back & forth but it doesn't update the state neither.
The only way i can fix it is by manually using luge.lifecycle.refresh() in the console.

The part which is even more weird is that <section> that doesn't display doesn't contains specific strange DOM elements,
it's just some text for some and the fact that sections below ones which get stucked do works is nonsense to me haha

I didn't thought about images and lazyloading / images sizes might be the issue, i will investigate that

DamChtlv commented

@AntoineW The issue was because of the <img> not having width & height attributes, you were correct.

Note : Somehow keeping the use of luge.lifecycle.refresh() after the <img> sizes fix was causing some <section> which used to display to not work anymore, but removing the "initial fix" of using luge.lifecycle.refresh() totally fixed the issue :)

  • 🎉1