Horizontal Scroll is used several times throughout different pages. It is basically vertical scrolling with visual effect that allows it look like horizontal scrolling. It consist of 3 basic elements: Track, Camera and Frame. Please see the video above to understand it better. Note: some parts of the horizontal scoll content is not visibile in the Designer. To edit this part try hidding some of the elements in the same section temporarily.
Loader is a Symbol that is used on every single page. It is the Dark Overlay that reveals itself on every page transition. You can change its text via the Symbol itself. Loaders initial state is hidden, in order to see it change its container from none to flex. It has 2 seperate animations (mobile and desktop): Loader Animation - Desktop and Loader Animation - Mobile.
Cursor is another Symbol that is used on every single page. Its corresponding animation is Cursor Animation. The normal cursor is hidden in order for this to work and be aesthetically pleasing through custom code (See Custom Code section below). All links and buttons contain hover animation named Cursor - Hover In and Cursor - Hover Out (hover in enlarges the curser and when hoverd out the cursor returns to its normal size).
Menu is a Symbol that is reused on every single page. It is opened when clicked on the menu Button in the Navbar Symbol. Menus inital state is hidden, in order to change the links, images set its container from display: none to display: block. The menu scrollbar is hidden with some custom code (See Custom Code section below).
There are a few animations that are fired when scrolling into view. One of them is the Hero animation on the Services page. The animation (Services Page - Sticky Services - Desktop) is mounted on the parent element Hero. This is how it works: The main container (Hero) is 500vw heigh. The inner Wide Container is set to Sticky and its height to 100vh. This means that the Wide container will stick with your movement to the end of this section (to the end of Hero). In Wide Container are instances of Service. Those elements are positioned absolute and are initial hidden. Animation named Services Page - Sticky Services - Desktop is handling visibility of services. Note: If you want to change the content of a Service then make it visible temporarily and set the others to hidden.
Same goes to the animations for testimonials, gallery (Project Page) and all of the single word vertical line animations (on homepage, about, services, project page).
There are a few "tweaks" that need some custom styling with code (CSS) in order for the site to work and look as expected.
The box in the Green is mostly some QoL (Quality of Life). Elements with class name No Pointer Events can not be clicked or hovered in, overflow-x: hidden means that the page can never scroll horizontally (remember all horizontal scrolling on this page is actually vertical with some cool animations!), and the last paragraph where you can see z-index: 3 is setting footer image on top of the text. It is much easier to edit text in the designer if the footer is under text content.
In the Red box are some styles for Cursor to work properly. Cursor: none !important hides the normal cursor so it is not visible on the page. If you want it to be visible then delete this line of code. Pointer-events: none means that the actual cursor element is not clickable so it does not interfere with buttons, links and other clickable elements.
The line of code in the Yellow box is pretty simple. It means: set the scrollbar in the menu to 0px width (width: 0) and make it transparent (background: transparent).
In the last box (Blue box) are styles to ouline some text (outlined/bordered text). I will give you and exaple how this works. If we look at the first element:
.heading-1, .section-outlined-heading{
-webkit-text-stroke: 3px #222222;
}
It means this: Give all elements with class name Heading 1 or Section Outlined Heading a text stroke that is 3px thick and its color should be #222222.
Simple as that. All those elements are now outlined. Now we need to make that inner part of the text transparent. We do this with this line of code: -webkit-text-fill-color: transparent;
Because 3px is kind of thick on mobile devices we add some media queries. This is similar to a breakpoint in Webflow. We want the stroke to be 1px thick when the device width is lower or equal to 479px. That is what we do with this line of code: @media only screen and (max-width: 479px) {}.
That should be everything in the Custom Code section. If you have any other questions please mail me.
