Template Page

INSTRUCTIONS

Image of Anne Hathgate

Horizontal Scroll

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

Instruction Image

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

Instruction Image

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

Instruction Image

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.

Sticky Hero Animations

Instruction Image

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.

Sticky Testimonials

Instruction Image

Animation for testimonials is actually similar to Sticky Hero Animations (see instruction above). Element Testimonial Container is set to 500vh height. Its inner container Testimonials Sticky Container is set to 100vh and to position sticky. Then we have 4 instances of Testimonial which are hidden and set to position absolute. Animation called About - Testimonials Animation set them separately to visible and back to invisible while scrolling. There is actually another animation called About - Testimonial Circular Image Rotation that rotates the testimonial text around the images. The testimonial numbers and circular text is located ONLY in the first Testimonial instance. Note: If you want to change the content of a Testimonial then make it visible temporarily and set the others to hidden.

H
A
T
H
G
A
T
E