Menu
Menu is a Symbol that is initially hidden. To see the Menu content in the Designer change its display from none to flex. There are currently 4 links in there. The link text that moves horizontally is located in the Text Move Inner element and is a Symbol named Word (Loader). That way it is easier to edit it. There are 6 of them in each link so remember to edit all of them. When you hover on a link another text movement appears. This item is located in Hover On Track element and is a Symbol as well - named Small Hover Text - Move Right or Small Hover Text - Move Left. Each link has 2 instances of them so don't forget to edit both of them. When you are done editing do not forget to set the Menu's display back to none.
Loader
Loader is a Symbol that is initially hidden and it shows for a brief moment on every page transition. To see the Loader content set its display from none to flex. Because it is a Symbol it is very easy to edit the text content. It has two fields: First Word and Second Word so changing those should suffice. Loader happens on every page load with animation named Loader Animation.
Text Move
Text Move is an animation that is moving text either to right or left side. There are 2 different animations and containers. One is aligned to the left and the other to the right. Movements are reversed. Example: First one is moving to the left and when you hover on it the inner text moves to the right. The second one is moving to the right and when you hover in the inner text moves to the left. To edit the text change all of the Word Symbols in the Text Move Inner element. To edit the hover in text change all of the Small Hover Text - Move Right or Small Hover Text - Move Left Symbols. This Text Move animations are looping and start on page load. They are named Text Move - Left and Text Move - Right.
other animations
Every page has an initial animation/hero animation. You can find it on the page trigger. On the page trigger are also Star Rotate and Star Rotate (footer) for star rotation.
text outline
There are several lines of code to achieve text outlines. This code is located on Project Settings -> Custom Code (tab) -> Head Code (text area). It is very easy to understand and change. Example:
@media only screen and (max-width: 991px)
{
.thick-outline{
-webkit-text-stroke: 2px #D6D1CE;
}
}
Meaning:
@media only screen and (max-width: 991px) {<code>}: This line of code means that what ever is in the curly brackets apply for devices that are 991px wide or less. This is used because we want to have thinner borders on tablets and even thinner on mobile (479px).
.thick-outline{<code>}: This is a class selector. Code that is in curly brackets will be applied to every element that is name Thick Outline.
-webkit-text-stroke: 2px #D6D1CE; : Now this is the line that gives the outlines to the text. The outline is 2px thick and is of color #D6D1CE (hex value). If you want the stroke to be thicker you can change the 2px to a higher value. To change its color you need to chage the hex value (white = #FFFFFF).
To put this all together. This piece of code means: All elements named Thick Outline on the devices that are 991px wide or less should have an outline that is 2px thick and has a color of #D6D1CE.
