Hello, I’m brand new to Webflow and would really appreciate some help on my first design. I’m having a problem with the page load interactions / animations loading up on Google Chrome on Windows. It works perfectly on Chrome for mobile and on every other browser on both desktop and mobile. Its only on Windows Desktop Chrome that has the issue which is this:
Problem 1:
The Enter button on the landing links to the home page. The home page as well as all other pages from the Nav menu have page load animations which are freezing up on the initial load and then abruptly playing only a few frames of the animation in a jittery, choppy, sloppy way. Oddly enough if you refresh the page the animation plays all frames perfectly smooth. But if you leave the page and come back the animation is again jerky and freezes. This problem is not visible in the read only link so please use the public link to my live site.
Problem 2:
Regardless of the browser the Enter button on the landing page has a hover scale effect making the button enlarge. It also has a Press effect which shrinks the size. For some reason after adding the Press effect, the clickable area triggering the link is only respecting the smaller button size. So even though the button is larger upon hover the user has to move the cursor to the center of the button in order for the click to register and follow the link. Even weirder is if I disable the Press effect, the Hover effect and its larger size will work perfectly so the Press effect seems to be the culprit.
Really appreciate if someone can help, I can’t share the site with clients until this is fixed. Again, the page load animation problem is not visible in the read only link so please use the public link to my live site but I’ve included the read only as well. Thanks!
When creating interactions on links that navigate to a different URL you need some custom code to wait on the interaction to finish. Otherwise the interaction starts to play while the browser is navigating to another page!
Have a look at this guide on cross-page transitions
Regarding your second problem:
For me, the hit box is scaling accordingly to the button,
have a look:
Thank you so much for the warm invite and for trying to help but allow me to clarify. Regarding problem 1, I am not referring to any animation that is attached to a link. I am referring to page load animations, these are built purely in the page load interactions panel. So they really don’t involve any links. They simply play when a page is loaded and these animations are freezing in Chrome on Windows. On the Home page the text “Hyper Creative. Powerful Design.” should smoothly slide in, instead it freezes up before jerking into place. It looks perfect in the read only link and in any other browser besides Chrome Desktop Windows. Are you able to see this problem? Its the same on every other page, each with their own unique animations.
Regarding Problem 2. The Enter button does indeed scale up as your video shows, however if you click the edge of the button after hovering over it, it doesn’t take you to the link, you have to move the mouse to the center of the button, in other words, its original size before scaling up on hover.
The unresponsiveness could be caused due to lots of stuff going on immediately after page load. The browser is still parsing the sites code and you manipulate re-paint heavy css properties.
You also set your page load animations mostly on “when page starts loading” put them on “after page finishes loading” and also make sure your initial state is the same as the state the elements have in the beginning of the interactions. This can also cause flashes and switching of layout. Your interactions could also “fight” with one another when they act on the same elements at the same time!
The problem with the hit box can be solved with removing the different padding values for the normal/hover/pressed state! Only use the scale transformation for these effects, padding values can’t be animated smoothly on hover effects, if you need to use padding for this you should create your own hover and pressed state with an interaction!
FIX UPDATE on Problem 1 SOLVED: since it was only happening on Windows Chrome I updated that browser software and it works prefect now! I didn’t have to touch the load times suggested previously @RDaneelOliwav, but thank you for trying to help. Now only Problem 2 remains with the ENTER button. I will try your suggestion using just an interaction and see how that goes, but I’m just happy that the bigger problem has been solved
FIX UPDATE on Problem 2 SOLVED: @RDaneelOliwav thank you so much for the interaction suggestion and the link to how to setup a delay on the interaction, it works! In fact I didn’t even waste my time with the entire tutorial I just used Steps 1 and 3 and I adjusted the milliseconds timing to less than the time it takes to finish the interaction and it works perfectly! The key was to put the code into the footer custom code section as the instructions say in Step 1 and to use the same url or in my case the slug and reference that in the button settings just like the instructions say in Step 3. Those 2 simple steps are the only thing I did, took me less than 1 minute and I disregarded all the tutorials other design instructions for setting up the custom interaction cause I wanted my own simple look. Easy Peasy… thanks so much!
