Arrow won't start at initial state

We are currently working on the desktop breakpoint. We have these steps underneath the nav. The left arrow is suppose to stay hidden when the page is loading or loaded, and ONLY shows up when the right arrow is tapped or when step 8 section starts showing up.

We have a ‘scroll into view’ trigger for each section to trigger the these steps to turn blue + white text when scrolling towards the corresponding section, and to return to their transparent + black text background when scrolling out of view. For these triggers, we had set the initial state for the left arrow to be 0% opacity and hidden. But the left arrow is still hanging around when we loaded the page and started scrolling from the top of the body.

We have been trying to figure this out for ages and am just defeated! Hoping someone here can help us?

Thanks so much!

Our read-only link is here

hi @skinpores I have tried to find problem in your Zillion animation but it is PIN as website is very slow and take lots of memory and CPU. I would like to see performance stats when is live :wink:

anyway I wasn’t able to find where exact problem is but as you see on first image there is added styling but is coming from nowhere.

Second thing I have found is there is extra <script> that may cause another issues.

So I will start there and once is fixed try to find from where is opacity overwritten to value 1. No mother I have changed opacity was always overwritten to 1.

Good luck

1 Like

Hi Stan,

Thanks for taking the time to investigate! Ha, yes, we know the page runs very slowly as we haven’t quite manage to downsize the images with the software we exported them from without getting terrible quality. We are also still figuring our way with learning Webflow animations…

We followed your second suggestion, but the left arrow is pure stubborn! We have absolutely no idea where to even look for the first solution, as we are all still beginners on Webflow. Don’t suppose you may have a slight idea on where/how we can start fixing that bit?

For now, we are going through every animation used on this page to check perhaps one of them had the left arrow set as opacity 100% and display: show as initial state. It’s not the most efficient method, but the only one we know we can do. If you or anyone have better ideas to check this, do let us know :slight_smile:

Thanks again for your help!!:slight_smile:

hi @skinpores check first custom codes in following order site, page, embed section. I was checking page and embed but I can reach yours site custom code if any and look into animation. When I had set div-444 opacity to zero it get overwritten with slide out section so you can start there. But like I said styling is coming from stylesheet and this element.style is used when you do styling in DevTools, thats why I have no idea from where style (from img 1) is coming from.

1 Like

hi @skinpores I see that you have found the problem and fixed it. :wink: You can close this issue.

1 Like

Hello! Ah yes it’s fixed! A bit painful going through each animation during vampire hours.

We made several changes before publishing, so not entirely sure which one(s) per se that solved the problem. We suspected that because we changed the steps to show up using “while page is scrolling” (instead of triggered by step 1), the initial state for div block 444 for steps 8 to 14 was still set based on the steps being triggered by previous sections.

Thanks so much for your help on this. You’re awesome! :smiley:

1 Like

hi @skinpores changing steps was my suggestion too I have even start with this process but to be honest I was a bit lazy to do that as there is no way just move initial statement around and when I saw the amount of changes front of me … It will be nice to be able move these around without uninitialising and initialising back . I can see you pain. :wink: