Arrow BackArrow Back

instructions

Back home

Instructions Hero Image
(instructions)
(instructions)
(instructions)

cursor

Instruction Image

Cursor is a 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 cursor and when hovered out the cursor returns to its normal size).

cards

Instruction Image

to change the on hover content of the card element change the height of card overlay from auto to 100%. after you have edited the content change it back to auto. this applies for services cards (homepage), projects cards (projects page), our work card (project cms page).

projects

Instruction Image

projects on the home page are positioned in a different way. Each one has a specified position. because projects are cms content that means that each link has its own collection (element called home projects collection list wrapper). Note: you can only use 20 collections on single page.

there is also a page trigger animation called home - hover image view that allows us to show project's thumbnail on mouse move/hover.

footer

Instruction Image

to see the footer links and content simply change the footer background from black to white. after you have edited them change the background back to black.

footer on scroll animations are mounted on footer itself and are named footer overlay animation (for desktop, tablet, mobile) and footer overlay animation - mobile landscape (for mobile landscape orientation).