Issue with Header 83 Component Animation Not Displaying Correctly

Hi! Im using the header 83 component, and for some reason it looks like its scrolling past part of the animation when viewing the site. It looks correct when Im in designer mode, and I have not done anything with the site. I deleted all classes and animations connected to this and re uploaded the component. But still the same issue. Please help

32 comments

Matt J.
·
·
Tor V. Would you mind sending a read-only link?
Tor V.
·
·
Hi matt, its the same as the one I sent you last time 😅
Matt J.
·
·
Tor V. are you using some sort of custom code for the navbar transitions on scroll or?
Tor V.
·
·
Nope, I have not added anything like that, but can check if there is something. But it did use too work, and I’m not really sure what happened with it
Matt J.
·
·
yeah, I mean there is a bug that I've already filed where the content section needs to be position relative and z-index 1, and in my vanilla component test, that resolves the issues
🤔1
Matt J.
·
·
but it looks like something with the interactions was changed - doesn't look like the interactions were deleted originally when you tried to add this component a second time either
Matt J.
·
·
Tor V.
·
·
hmm aight. Maybe then try to delete the interactions and re add it ?
Matt J.
·
·
here's my test, where it works fine with that small tweak I had to make https://preview.webflow.com/preview/testing-header-83?utm_medium=preview_link&utm_sour[…]3&preview=c2c2c119d32cbf41f912e0ec65320374&workflow=preview
Matt J.
·
·
I would use the chrome extension to add this component and then make that small tweak I mentioned (will detail that next), and then you should be fine
Matt J.
·
·
(and yeah, clear out the classes and interactions)
Tor V.
·
·
thanks, will try this
Matt J.
·
·
Just need to add position relative and z-index 1 to the _content div and you should be good.
Matt J.
·
·
Matt J.
·
·
but if not, let me know for sure, keen to get this resolved for you - header 83 is one of my favorite components 🙂
Tor V.
·
·
So, I just tried to ad the relative and z index and that did not fix it
Matt J.
·
·
right, there's something else within all of your stack and interactions that is causing it - did you delete the classes/interactions and re-add the component?
Tor V.
·
·
I managed to delete everything and then copy it in again. And now it works
Tor V.
·
·
thanks for the help again! 😄
Matt J.
·
·
awesome sauce! 🔥🚀🎉
🎉1
Tor V.
·
·
Can I replace the images with video backgrounds on this or will it be ruined again ?
Matt J.
·
·
well technically it should be fine if you put the video element in the same place as the image element
Matt J.
·
·
but from a performance/UX perspective, it might not be an ideal experience potentially. It really depends on the videos and how they are optimized you know? If you were to optimize them really good, and use something like Vimeo, and then maybe be super mindful or smart about low-bandwidth situations (can you detect if a user is on 4G mobile versus 5G or wifi? If so, show videos, if they are not on wifi, show images?) then I could see how this could all come together just fine.
🤔1
Matt J.
·
·
this is one of my favorite YT videos on background videos in WF https://www.youtube.com/watch?v=m-OQTr0akKc
🙌1
Tor V.
·
·
good point, I will discuss this with the client as well
Matt J.
·
·
yeah and if you want more ammo to refute this idea with your client
Matt J.
·
·
accessibility would arguably be the nail in the coffin on this idea
Matt J.
·
·
having multiple background videos playing automatically is an accessibility nightmare
Tor V.
·
·
thats true
Matt J.
·
·
just my two cents though, take it how you want! 🤘
Tor V.
·
·
nah its a super valid point. And usually I think about this my self 😛 so thanks for pointing it out for me
Matt J.
·
·
haha all good

Issue with Header 83 Component Animation Not Displaying Correctly | Relume Community