Streaming live at 10am (PST)

"Scroll suggester" on transparent layer

Hey everyone,
I would love some help with another way to solve this problem, please. :slight_smile:

I had an element on my page to suggest scrolling down. I did it by creating a flexbox section with fixed position, 100vh and Z-index higher than all other layers. Then put a pulsing arrow image (WF animation) into a link block which is aligned to bottom-center. (clicking the link block scrolls to turn section.) Set up a scroll-related disappearing act. Great!

Everything was going well in Preview mode, but I discovered that once the site was exported, clicks weren’t being passed through, so the site was effectively broken. (Interestingly, the button with an interaction (Click for current promotion) is the only one that didn’t work while published with Webflow. All other buttons worked fine, adding to my confusion about why the site was broken.)

I am aware of pointer-events: none solution but #1 it doesn’t work in <IE10 and #2 I have a link block in the layer.

I’m perfectly happy to do this in a different way, but I’m not experienced enough to know what other options are possible.

I have considered animating hide/show instead of opacity, but I’ve discovered that if you scroll to a section (/#dax, /#contact) and reload the page, the pulsing arrow layer appears again. This is because the disappear interaction is based on the user scrolling 10% down as opposed to a page-anchor (I have no idea how to do that or if possible).

A solution would be greatly appreciated!

All the best,
Dax.


Here is my site Read-Only: https://preview.webflow.com/preview/pfss-2019-2?utm_medium=preview_link&utm_source=designer&utm_content=pfss-2019-2&preview=bb56343e124e2aec369d8bf770388f1c&mode=preview

Here is my Webflow-published site: https://pfss-2019-2.webflow.io/

Here is the externally-published site, without pulsing arrow: https://www.puzzlefactory.uk/

Hi Dax,

It sounds like you are trying to do something not to complex, but I am not sure… Would you be kind to maybe show an example of what you want to do?
(It is usually better to show then to tell :smiley:)

Hi Aviv,
Thanks for your reply.

You can see exactly that if you click on the published site (second link).

Hello @daxliniere,

Im not 100% sure what you are trying to do but I would suggest that you use the move and opacity option on your scroll down arrow icon. But instead of using while scroll down option for the interaction use the while scrolling option, that way it is still visible when it is on the top and moves out of the way, resolving the issue of clicking, as the user scrolls down. So, when you set your interaction, set your down arrow to disappear as soon as the page is being scroll down, and once it is not visible anymore, set it to move to the right or left where it would not interfere with the other clickable elements. I hope this helps you, it is just a possible solution. Please let me know if could work.

Hi Pablo,
Thanks for your suggestion.

I guess you’re saying to change the layer from Fixed to another parameter?

As for what I’m trying to do, I do believe my description has been true to the example you can see in the second link. Things don’t work in the first (read-only) link, but that seems to be a Webflow issue.

All the best,
Dax.

@daxliniere,

Do you really need that layer though, why don’t you place the arrow in your Hero section with position fixed so it scrolls down, and with an interaction you can hide it and move it out of the way for the other elements to be clickable.

Because hero section isn’t 100vh, it’s different for every device. Arrow must appear at bottom of screen.

If you position it fixed, it does not matter that the parent div is not 100vh

Perhaps you can give more details by explanaing all steps, I think I’m missing something here.

If you don’t set 100vh, how do you make it appear at the bottom of any sized screen?

An element with position: fixed; is positioned relative to the viewport
https://www.w3schools.com/css/css_positioning.asp

Ahh yes, excellent. Thank you Aviv.