New Feature Alert: Header Scroll Effects

When you set a header as Fixed , you can give it various scroll effects including a Fill color effect, and Transition effects like Move and Fade . Check out this gif below.

Here’s how:
Select your header, then from the Inspector panel, under Scroll , set it as Fixed . Then you can define Transition and Fill color effects. Both effects can be applied together for some really cool behavior.

Note:
The Fill color effect can be customized per breakpoint, but the Transition effect affects all breakpoints. However, you can set the Move Distance relative to the component dimension (in %) —so your header moves in different distances, depending on which breakpoint you’re on.

Have fun and let us know if you have any questions.
Also, don’t forget to share your beautiful sites with us here!

Naama

11 Likes

This is amazing Naama, thank you so much

I can’t seem to access this feature. Editor X doesnt allow me.

EDIT: I realised there is no option if you add a section and make it a master. Then “Fixed” does not show up. You have to use the original Master Header that comes with the blank template for the scroll features to appear. Please fix this so it works for any master.

A feature request regarding this scroll would be, the ability to edit the faded bar. For instance, I want the logo to be big in the header on the first fold and section, but then as the user scrolls, I want it to become smaller. For example check out the Webflow home page. https://webflow.com/ As you scroll, it switches to a different smaller header. Im not a fan of the Webflow transformation from the first fold header to the scroll header, but it would be cool if the logo shrinks on the header as a user scrolls on my website.

Additionally, a feature where a different master shows depending on what section is visible when scrolling the page. A great example of this is the Dropbox website https://www.dropbox.com/ . As you scroll, the header colour changes to match the section colour and the text and logo also changes. This would be super cool if Editor X offered.

I am having trouble with the Hamburger Menu. When i click on the hamburger menu, the X symbol disappears so there is no way to close the pop-up menu. I dont know how to fix this. Please allow us to add an animation to the Menu pop-up as it opens.

Hi,
Thank you for the feedback.
Forward looking, we will support more advanced interactions which will allow to implement the user case you mentioned with the logo.
Currently you can create a new header by duplicating the existing header either on stage or in the masters panel. Setting a header as Fixed is only possible if that section is most top across all breakpoints. Once you make sure this condition is kept then the Fixed will be enabled and so will the scroll effects.
Na’ama

Also add the changing colour header depending on the section colour. For example the header color and text color changes when scrolling https://www.dropbox.com and https://hellostake.com/ .

Please also fix the Hamburger Menu. The X close icon disappears when the hamburger menu opens. Everyone is experiencing this bug on the forum. https://www.editorxcommunity.com/forum/community-discussions/x-in-hamburger-menu-is-hidden-when-menu-is-open-so-it-can-t-be-clicked

Hi Liam,

I’m Karina and I work for the Editor X Product team.
Regarding the Hamburger menu icon, unfortunately it is known issue we have and our development team is looking into.
Thank you for your help and we appreciate your patience. We’ll contact you when we have an update on this issue.

Karina

Hi Karina.

Thanks for you reply. Hopefully this get fixed soon!

I have some other feature requests. If you visit this site https://www.flux-academy.com/ , which was built on Webflow, they allow for advanced animations and interactions. In the first section, the page has this loading animation, which is nice. Also as you move your mouse over the first section, the objects move along with the mouse movement. This could be a great idea for the Interactions team. Also as you scroll, elements move along with the scroll. This could supplement the “Parallax” scroling effects already offered and create a more advanced system.

Please also allow for us to access the code of the website, most importantly allowing us to enter CSS code and access the Stylesheet of the website. At the moment that is the big difference between Webflow and Editor X. This is an important feature for Pro developers.

How about we fix core issues and make monumental updates instead of in one month we have sticky headers that takes 10 paragraphs to describe how to make work and a iframe?! Wtf. Wix had 8+ billion in market cap added almost overnight and trust me it will all vanish if this is the path wix is choosing!!! I cant get a sole to listen and work with me on the things that will actually take market share!!! The system had a dramatic shift to our favor, online literally overnight and we are not doing what is needed to become industry leaders. Look if wix doesn’t make the necessary steps to become more than just a website maker its doomed! frankly the editor X is difficult for even me let alone a novice. New platforms and market specific websites builders and going to put wix out for good. I go onto Instagram daily and see at least 1 new entirely independent platform to choose from. Not just people selling wordpress or squarespace sites repackaged anymore either! The competition is dramatically increasing and the only way to combat them is to offer more than just fancy brochures online and shopping carts with difficult sticky headers! No we need to focus on 4 key areas. Number 1: Live streaming. No OBS crap no third party nkn sense. Rather an entire encoder of our own with a live dashboard that you can create custom scenes make custom transitions and have the ability to make studio professionally produced broadcast all form the wix dashboard! It needs to be able to have multiple guests from different locations and not be reliant on skype, zoom hangout then obs then wix. It needs to be able to stream live to YouTube, Facebook and the site. It needs to be able to sell products through the stream similar to a shopping network. An entire redesigned commenting and discussion with paid super chats . Closed captions, ad rolls, gosh I mean let’s go people!!! why are we dragging our feet and backsliding so much on unimportant things that even the literally most basic platforms offer!!! With Wix’s current capital we have to freaking make headlines not headers!!! Live streaming is just one of the 4 areas that we could completely dominate almost overnight!!! There is soooooo much potential alone giving people independent streaming platforms with their own paywalls. Plus selling hardware from lighting, cameras, green screens, audio, cables etc. so many small fish that one big fish in one bite could eat up completely!!! If quarantine has taught me anything its even giant broadcast networks dont know what the heck their doing when it comes to streaming!!! I turn on tv and see multiple billion dollar studios streaming on low resolution facetime cameras wearing dang earbuds. Its embarrassing to watch. But the opportunity is there and capitalism always always always wins! Whatever is the most profitable outcome unquestionably is what will happen. If wix doesn’t I promise you if I’m thinking of this then at min a million other people like me are also!!! I’m going to make a podcast tonight and go over the other 3 key elements wix has to focus its attention on otherwise the bull run will be over and the opportunity will be missed!!!
https://www.ourstud.io/podcast
-NATHAN DELLE

did this feature not roll out in india??

I faced the same issue, but I clicked on the Menu icon, and from ‘Arrange’ I selected ‘Bring to Front’ and then when I opened the menu, the X icon appeared. It worked for me so, hopefully it works for you too.

Yeah, it rolls out worldwide!

When Will we have a DARK THEME Interface in EditorX, working on white Bg for long hours irritates the eye…hehehhe but yes, a DARK THEME indeed… thanks

@naamar I tried making the header the most top across all breakpoints. Fixed still doesn’t show up. I think there is a bug.

@pratham That sort of works, but it now conflicts with a Fixed Header.

@naamar @karinam Watch this screen capture video: https://www.screencast.com/t/n7ssCzEc In the video, the Menu is positioned behind the header. The Close ‘X’ icon is visible, but when I scroll, the whole top of the menu is covered by the Fixed scroll header. When I go back into the editor, and “Send to back” the header, now the Menu appears above the header even when I scroll, but the close ‘X’ icon has disappeared. Please fix this asap. It is disappointing that the Editor X team cannot fix such a simple problem. I don’t understand what is taking so long. Why do I have to spend my OWN time recording this screen capture and writing these paragraphs in the Forum to help Wix?? Very frustrated. :frowning:

The feature is cool, no doubt! But what is the use of the ‘Ease’ option below Delay?

@naamar @karinam @sebi-vidret No one from Wix is going to respond!? There is not much activity in the Editor X Community ! No one communicates here compared to the Wix Corvid Forum and Partner Forum. :(( I am trying to help out Wix with new feature ideas to make the platform better.

Additional Header features like ability to customize the header Border, Shadow, Corner Radius etc. Please also add the advanced header scroll features listed in my post way above. This Apple like Header blur effect (when you scroll the first fold) https://www.framer.com/support/ is a great idea.

Also, why can I only add one hamburger menu? If i add another Hamburger Menu from add panel, it connects to the original menu. What do i do if i want to add more than one hamburger menu with a different customization inside the menu??

Hi, the ‘Ease’ option enables you to control the animation acceleration level depending on the type u choose, e.g. whether it begins slow and then becomes quicker, etc.

Hey Alejandro, do you mean like in this example?
If so, you are welcome to go here , when you have specified steps of how to create such (second example).

And… if you want a specific component to show when you scroll, you can use Corvid with onViewportEnter.
See reference here .