These animations use GSAP and are triggered by custom events or scroll-based attributes.
Page Loaders
Because each page has unique header layouts, multiple loaders are included. Each is named according to the page it applies to:
- Homepage Loader
- Header Cards Loader (shared across multiple pages)
- About Page Loader
- Blog Page Loader
- Gallery Page Loader
- Menu Page Loader
- Blog Template Page Loader
Scroll-Triggered Animations
To add scroll-triggered animations:
- Select the element
- Open the Settings panel
- Under Custom Attributes, add:
- Name:
data-reveal - Value:
fade-in – fades in the element itselfstagger – staggers in the element’s children (often used for button groups)
Scroll Animations in This Template
- Intro Text Animation
Used on the homepage intro text. As you scroll past the intro section, letters fade in from left to right, line by line.
- Section Background Parallax
Adds a subtle parallax effect to section background images, creating depth as you scroll.
- Header Background Parallax
Works similarly to the section background parallax, but is adjusted for header sections at the top of the page.
- Header Background Scale
Gradually scales the header’s background image down to its original size as the section scrolls out of view.
Hover Interactions
- Button Link
When a button link is hovered, a line slides smoothly into view.
- Gallery Slider Image
On hover, an overlay and Instagram icon fade in over the image.
- Menu CTA Link
On hover, the child background image (set to absolute positioning within the section) fades into view.
