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. This transition is handled by animation named Loader Animation.
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.
Every link has its own image that shows on hover. It is located in the Menu Image Container (see red arrow above).
Color transition on the homepage is mounted on the Section element. When this section scrolls into view an animation called Home - Projects To Dark is fired. This changes the background from light to dark and the text from dark to light. When this section disappears from the viewport animation called Home - Projects To Light is fired. It does the opposite (background to light, text to dark).
Projects Parallax is monted on the Section element (the same one as for color transition). While this section is scrolling into view, images are moving to the top at different speed. The animation that handles that is named Projects Parallax.
Milestones are all located in the History container. This container is set to 400vh height (4x display height) and the inner part named History Sticky Container to 100vh and its position is set to sticky. This means that History Sticky Container is going to be centered and sticked there to the end of History container. The animation that changes the year, paragraphs and milestone headers is called About - History Sticky Animation. The instances of milestone headers are stored in the Milestone Text Container, digits are stored in the Wrappers and paragraphs in History Paragraph (you can see them above in the red boxes). The first element in the container is static and all the others are positioned absolute. Animation then handles which one is going to disappear and which one is coming into view.
Note: The easiest way to change the text, digits of the absolute elements is simply to set its position to static, opacity to 100% (texts only) and edit them. After you have done that set the position back to absolute and opacity to 0% (texts only).
All Images are located in History Milestone Images container. There are 4 inner containers (4 milestones = 4 image containers). Each of them has its own images and animation called About - Milestone <index> Images Parallax the index depends on the container. Every inner container is positioned absolutely with the height of 100vh and a top margin which depends on the index (first = 0vh, second = 100vh, i-th = i * 100vh).
Some of the text on this template is outlined. So far this feature is hard to do in Webflow Designer so it was made with custom code styles. It is very easy and I'll walk you through it. You can find the custom code on Project Settings -> Custom Code (tab).
In the header box is the code that is on the image above. Let's break it down:
.huge-text{
-webkit-text-stroke: 3px #222222;
-webkit-text-fill-color: transparent;
}
This means: Element with class name Huge Text has text stroke that is 3px thick and is of color #222222 (HEX value). The inner part of the text is transparent. And that is it! So whenever you name a text element with this class it is going to have that stroke. There are a few different class names because some strokes are different.
Another thing that is in the custom code is this line:
@media only screen and (max-width: 479px) {
.huge-text{
-webkit-text-stroke: 2px #222222;
-webkit-text-fill-color: transparent;
}
}
This means: Element with class name Huge Text has text stroke that is 2px thick and is of color #222222 (HEX value) on the devices that are 479px wide or less. And that is the only difference! This part of code only applies to mobile devices.
