Dead zone on page after resizing header with animations

Ask the community
, , ,
1

Question:
I’ve set up a website to animate the header to be smaller when you scroll down from the top of the page and return to its full size when you scroll back to the top (using timeline() stuff). The full height of the original header has no ability to click through to buttons, links, or drop-downs on the page even though the strips within the header have been moved around & are no longer in the way. What can I do to remove this dead zone and allow stuff to be clicked on when the header contents are out of the way like this?

Product:
Wix Editor

What are you trying to achieve:
Remove the dead zone

What have you already tried:
Made all parts opaque to verify that none remained in the way. Tried animating the position of the header itself to start above the page to move it out of the way. Tried animating the scale of the header itself to reduce its size. I have seen no changes to anything in either case.

Additional information:
Some of the strips used to have show() & hide() used on them in the code, but I found that combining these with the animation system caused these pieces to glitch into the wrong state when users scrolled up & down rapidly enough to trigger the functions quickly, so these parts are instead animated to and from a y value of -500 which has removed this glitch… but I’ve tried returning it to show() & hide() and that didn’t seem to effect it at all, so I’m not certain this matters.

2

To help us understand the issue you’re facing with feathers, it would be super helpful if you could share a few things:

  1. Screen Recording: If possible, could you record a short screencast showing what’s happening? This will give us a much clearer picture of the problem.
  2. Code Snippet (if applicable): If the issue seems related to code you’ve implemented, a screenshot of the relevant code would be fantastic!

These visuals will be a huge help in diagnosing the problem and figuring out the best way to fix it.

Right now, without seeing it visually, it’s a bit tough to pinpoint the exact cause.

3

Here are some screenshots with a few notes added onto them describing what’s going on. If I scroll just right, I can have the bottom of the button work without the top of it working. All clickable objects on all pages are effected by this dead zone, and it exists on both Desktop & Mobile versions of the site:

DeadZoneScreenshots
DeadZoneScreenshots1613×666 284 KB

Here’s code for how the header shrinks down. The code for growing is just the inverse of this:

	$w("#triggerStrip").onViewportLeave(() =>
	{
		if (wixWindowFrontend.formFactor == "Desktop")
		{
			var newX = -35, newY = -18, newScale = 0.82;
			var menuX = 0, menuY = 0;
			var underLogoX = newX*2, underLogoY = (newY*2)-15;
		}
		else
		{
			var newX = 0, newY = 71, newScale = 0.6;
			var menuX = 0, menuY = newY-149;
			var underLogoX = newX, underLogoY = newY-15;
		}
		var timeL = timeline();
		if (wixWindowFrontend.formFactor != "Desktop")
		{
			timeL.add($w("#mobileButton1"), { y: -500, x: 0, scale: 1, duration: 1, easing: 'easeOutCirc' }, 0);
		}
		timeL.add($w("#staticStrip"), { y: -500, x: 0, scale: 1, duration: 1, easing: 'easeOutCirc' }, 0)
			.add($w("#floatingStrip"), { y: 0, x: 0, scale: 1, duration: 1, easing: 'easeOutCirc' }, 0)
			.add($w("#floatingHeaderImage"), { y: newY, x: newX, scale: newScale, duration: 600, easing: 'easeOutCirc' }, 0)
			.add($w("#menuBarStrip"), { y: menuY, x: menuX, scale: 1, duration: 600, easing: 'easeOutCirc' }, 0)
			.add($w("#underLogo"), { y: underLogoY, x: underLogoX, scale: 0, duration: 600, easing: 'easeOutCirc' }, 0)
			.play();
	})
4

Even though you’re using animations to arrange the header elements, it seems to be covering the contact information when you scroll down.

This might be happening because the header is pinned to the top of the page.
While the animation hides the header elements , it seems the header remains pinned to the top of the page. This overlap prevents the contact information from being fully visible as the user scrolls.

Here’s a possible solution:

Enhance the Animation Code: You could modify the existing animation code to include two actions:

  1. Move the Contact Section Up: As the user scrolls down, the animation code could trigger the contact section to move slightly upwards. This creates space between the header and the contact information.
  2. Shift Contact Content Down (Slightly): In addition to moving the entire section up, the animation code could also adjust the position of the content within the contact section itself. This could involve moving the text and other elements within the section a small distance downwards.

By combining these two actions in the animation code, you can achieve a smooth transition where the header slides out of the way, revealing the entire contact section as the user scrolls.

5

I don’t think I fully understand what you’re suggesting here… Here’s an amalgamated image (below) I’ve combined to show the full Home page that’s shown in those screenshots. On this page, the “Schedule Now” and “Read More” buttons both function when >90 pixels below the smaller header. The same for the “Schedule an Appointment” button in the footer when scrolled all the way down. On other pages, other buttons are effected with the same issue in the same places. If a button is just barely within 90 pixels of the smaller header, whatever lower portion of the button is below that line will still function properly. (90 pixels is the difference in header size on mobile between the smaller and larger header.)

Are you suggesting that all elements on all pages should be moved around when the header-specific animation occurs?

HomePage
HomePage337×4094 215 KB

6

There seems to be a misunderstanding.
The animation issue is with the header section itself, not the contact section.

  • Move the Header Section Up: The animation code could trigger the header section to shift slightly upwards as the user scrolls down.

  • Adjust Header Content Position: In addition to moving the entire section, the animation code could also target the positioning of the content within the header section itself.

7

All of the header’s content has been moved out of the way. There should be nothing blocking the click-through. The very first thing I did was to verify that this is the case.

I’ve attempted to add code that moves or scales the entire header box as part of the animation, but there was no change to anything from doing so… Not to the bug or to the header’s contents. This was the second thing I did. Since it didn’t have any effect, I deleted the added code.

8

We apologize that our previous attempts haven’t resolved the issue. To assist further, we’d need editor access. Here’s our email for reference: cmswixblocks@gmail.com.

9

I eventually figured out a workaround.

The core issue is that the height of the header will prevent clickthrough even if there are no objects in the header that are in the way.

So I made the header shorter. The longer version of the header has its background split into two strips, the second of which is popped down into place on page load. The longer header is basically hanging outside of the header’s bounds. When switching to the smaller header after scrolling down, there’s no longer a dead zone because the header’s box is the smaller version of the header’s vertical size.

To accommodate this, I’ve added a small spacer at the top of each page so the page contents won’t overlap with the longer version of the header. This spacer is the height of the old dead zone. (59 pixels on Desktop & 89 pixels on Mobile)