Instructions

These are interactions built in Webflow’s native Interactions panel.

Navbar Animations

• Navbar Menu Open/Close
  Triggered on .navbar_component, this handles the mobile menu toggle.

• Navbar Scroll Show/Hide
  A page scroll interaction that hides the navbar when scrolling down and reveals it again when scrolling up.

• Navbar Dropdown Card Hover In/Out
  On hover a background image overlay of the hovered card increases in opacity and the background image scales slightly larger.

• Navbar Link Hover In/Out
  A simpler effect where the underline slides in or out when hovering over the link.

• Navbar Dropdown Open/Close
  A simple opening and closing animation of the navbar dropdowns. There are desktop and mobile versions clearly labelled for these animations.

Hover Animations

• Link Underline Hover In/Out
  A simple underlining hover animation used on links such as the navbar links.

• Button Underline Hover In/Out
  A simple underlining hover animation very similar to the above link underline hover animation but specifically targeting buttons.

• CTA Card Hover In/Out
  On hover the background overlay gets an increased opacity and the arrow icon shrinks in size using a scale transition. When hovered out the animation is reversed.

• Card Hover In/Out
  On hover the card image grows in size using a scale transition. When hovered out the animation is reversed.

• Team Card Hover In/Out
  This animation grows in the short bio, slides up an underlay to increase readability of the bio and scales out the profile image. The animation is reversed when hovered out.

• Icon Row Card Hover In/Out
  Increases the width of the hovered card which in turn shrinks the other cards in the row. It also fades in a background image and changes the text colour of the hovered card while growing in a short description. This animation only works on desktop screen sizes and above.

Other Animations

• Accordion Open/Close
  Animates the expanding and collapsing of all accordions. There are two variations of this animation, one to use for an accordion that is open by default and the other to be used on accordions that are closed by default

• Timeline Tabs Change Active/Inactive
  This tab change animation has a desktop and mobile version. The active tab link has a background indicator slide in to clearly show it is active. When inactive the indicator slides back out of view.

These animations use GSAP and are triggered by page load or scroll-based attributes.

Page Loaders

Because each page has unique header layouts, multiple loaders are included. Each is named according to the page or layout it applies to:

• Homepage Loader
• Stagger List Loader
• Stagger List & Sidebar Loader
• Fees & Information Page Loader
• About Page Loader
• History Page Loader
• Tabs Header Loader
• Contact Page Loader
• Long Content Page Loader
• Staff Template Page Loader

Scroll-Triggered Animations

Use the following custom attributes on an an element:

• data-reveal="fade-up" - The element slides up into view with an opacity reveal effect.

• data-reveal="fade-left" - The element slides to the left with an opacity reveal effect. On tablet and below screen sizes the sliding to the left is replaced with a sliding up.

• data-reveal="fade-right" - The element slides to the right with an opacity reveal effect. On tablet and below screen sizes the sliding to the right is replaced with a sliding up.