Instructions
Interactions & Animations
This section explains how to set up and manage key animations throughout the site.
Navbar Background Animation
The navbar background animation triggers based on scroll position. When the user is at the top of the page, the background exits by sliding upward. As soon as the user scrolls down, the background reappears by sliding back into view.
Where to find it:
This animation is set on the navbar_background-trigger element, which is located in the Footer component.
To customise it:
- Select the navbar_background-trigger element.
- Open the Interactions panel.
- Adjust the animation as needed.
Header Slider – Home 3
To edit the header slider animation that is used on Home 3 and About 3, locate the header_slider element where the interaction is applied.
Each slide (labelled 1 to 4) includes a unique image.
⚠️ Important: You cannot add or delete slides, as doing so will break the interaction.
At the bottom of the header, progress bars show the active duration of each slide.
If you delete these bars, make sure to also remove any references to them in the animation to avoid issues.
To customise:
- Select the header_slider element.
- Open the Interactions panel.
- Make your edits.
Bookings
Embed your booking engine code on the Bookings page in place of the booking form or link your booking engine URL to the Book Now buttons.