author:
Tim poličar
template page
6/14/2022
template page
instructions
Homepage has a logo animation that scales it from huge to small and then it sticks to the screen with other navbar links. There are 3 different Navbar animations for different sizes (see above). The animation trigger is an element called Logo Animation Trigger.
Note: Homepage Navbar is not a Symbol which means it is not shared throughout different pages. If you change the links on the Navbar symbol it WILL NOT change the link on homepage. Links on Tablet and below are also different than link on desktop screen.
If you hover over an Article you will notice that it reveals a button which moves with your mouse cursor. This element is called Item Hover Button and is handled by animation named Hover Item On Mouse Move.
How it works: Element named Mask has on hover animations called Blog Item - Hover In and Blog Item - Hover Out. These animations are responsible for Item Hover Button scale. So if you hover in the Button shows and if you hover out the Button disappears. Hover Item On Mouse Move is responsible for Button movement.
Note: To change the text in the button set the Item Hover Button's display to flex, scale it to 1 and z-index to 2000. Edit the text then do not forget to set all the properties back to default!
When you reach the Infinite Words Container the words will start sliding. This is handled by animation called Infinite Words Animation that is mounted on its parent Section.
If you hover over an the sliding text you will notice that it reveals a button which moves with your mouse cursor. This element is called Item Hover Button and is handled by animation named Hover Item On Mouse Move.
How it works: Element named Infinite Word Container has on hover animations called Infinite Word- Hover In and Infinite Word- Hover Out. These animations are responsible for Item Hover Button scale. So if you hover in the Button shows and if you hover out the Button disappears. Hover Item On Mouse Move is responsible for Button movement.
Note: To change the text in the button set the Item Hover Button's display to flex, scale it to 1 and z-index to 2000. Edit the text then do not forget to set all the properties back to default!
