Hexons documentation

Start by updating your Framer site settings: Framer > Site Settings > General. Use the official Framer documentation as a reference.

Templates for Favicons, App Icons, and Site Images are available in the Figma file - find them on the Assets page.

Since the logo appears in at least two places - the main header and the sticky header - it is managed through a component. To update it, replace the content inside the Logotype component.

1. Go to the Assets tab and locate the Logo component in the Project folder.
2. Drag the SVG onto the canvas, then place the logo inside the Logotype component via the Layers panel.
3. Resize it while holding Shift to maintain proportions.

• Open Layout settings and locate the Nav component. Enter it to edit the menu contents.
• Any changes to the Nav automatically apply to both the sticky and main menus.
• There are two link types inside: NavLink and NavDropDown. The NavDropDown has a dropdown overlay mechanic and is not itself clickable. Inside the NavDropDown overlay, there is a CloseOverlayOnScroll component.

• Edit the Mobile Menu component directly to update mobile navigation.
• The easiest way to add a new link is to duplicate an existing one and update its data. If you create a link from scratch, make sure to pass a click-link event to it - this event is required so that clicking a link automatically closes the menu.

• Go to Layout settings, enter the Footer component, and edit its content - changes apply site-wide.
• A lightweight version of the Footer is available. You can swap to it by following the recommendations .

1. Moving a section to another page: Always copy the desktop version - intermediate breakpoints are copied along with it. Select the section, right-click it in the Layers panel, and choose Copy. Navigate to the target page, select the Desktop frame, right-click, and choose Paste.
2. Replacing one section with another: Copy the section as described above. On the target page, select the desired section in the Layers panel - make sure the parent frame is selected - then right-click and choose Paste > Paste in Place.

Configured via the Page Effects menu. See the Framer documentation for details.

On all pages, each section has a scroll animation with a Layer in View trigger - the entrance effect fires when the section enters the viewport. This can be configured per section. Currently there is no way to change all effects globally, but for convenience they are identical across all sections and applied only at the top-level frame of each section. The effect can be copied and pasted between sections.

• Used inside the dropdown overlay in both the main and sticky menus.
• Hides an expanded dropdown when the user scrolls. Not required, but improves the overall UX.

• Used in the Layout Template to display the Sticky Header.
• An invisible component that shows content after a defined scroll threshold. Supports separate thresholds for showing and hiding, as well as configurable entrance and exit animations.
• Note: Setting height to fit content makes the element unselectable on the canvas. Use fixed height values instead.

• Used on all Home pages.
• Creates a marquee/ticker text effect tied to the scroll event. Supports direction, animation, font, and color customization.

• Used on all images across the site.
• Controls image movement tied to the scroll event. Unlike the native parallax, it activates only when the image is in the visible viewport area. The image fades in smoothly as it loads.
• Lazy loading - loads the image only when it enters the viewport, reducing page load and improving performance.
• Loading transition - entrance animation for lazy-loaded images.
• Movement transition - usually not needed; this is the motion animation that follows the scroll.
• Scale - used for a zoom-on-hover effect, controlled via Framer component States. An example can be found on any card component.
• Disable on mobile - turns off the parallax effect on mobile devices.

• Used in Card Case Portrait and Card Case Overlay components.
• Adds flex properties to the parent so it stretches to full height.