Hi, I’m having difficulties with this hero animation. The animation looks like it
works in the designer. However, when I view the published link, the first half of the animation is covered by (a div, page? ) something. Interestingly, second half of animation does show. And even when it loops, the whole animation shows in subsequent “loops”. Also, when I refresh the page (after first loading), it seems to work fine. I’ve tried changing z-indexes of everything…and no luck. Does anyone have experience with this? Could someone help me resolve this?
Can you try adding a 100% height to elements with class names hero_grid-up and hero_grid-down also please add 100vh height to element with class name hero_grid-wrapper?
I think that is what is causing the issue, let me know if it solved it
Thank you sooo much Marko!!! Now I can see the animation and it’s not covered anymore!!
Can you help me with the second part? Now I’m noticing that the first part of the animation the orange “arrows” (hero grid down) don’t show. After the first half of the animation, they show. They also show correctly in the designer and if I reload the same page all looks good. So the problem only seems to happen on initial page load.
That could be because in the first step where you try to animate hero grid down you also set movement on x axis (1st screenshot) but you do not set it on other steps (2nd screenshot). Can you try removing that from the first step and testing? Animations can be buggy in weird ways if you set something only in one step
