Horizontal Scroll 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 Overlay that reveals itself briefly on every page transition. Loaders initial state is hidden, in order to see it and change its content set the container from none to flex. It has an animation named Loader Animation that happens on Page Load.

Color transition is an animation that changes the color of certain elements when you scroll to a certain trigger. It is used on the homepage when you start the horizontal scrolling. The animations are mounted on the Section element (For Homepage Horizontal). When you get to this section the background will go dark and when you scroll out of it the background will go back to normal. Animations that handle this transitions are: Homepage - Color Transition (Dark) and Homepage - Color Transition (Light)

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 and images set its container from display: none to display: block. All hover images are stored in Menu Images Container Inner and they change on each link hover. Every link has its own on hover animation. Example: Home link has animations called: Home Link Hover In and Home Link Hover Out. Animations that handle menu visibility are named Open Menu and Close Menu.

There are a few animations that are fired when scrolling into view. One of them is About - Hero Sticky Animation - Desktop on the About page. The animation is mounted on the parent element Hero. This is how it works: The main container (Hero) is 300vh heigh. The inner container called Hero About Container is set to Sticky. This means that the inner container will stick with your movement to the end of this section (to the end of Hero). The animation then handles the parallax effects that happen during the scroll. Hero section is set to Absolute so because of that the second section needs to have top margin set to 300vh (Hero height). Animation on Project page is very similar.