Instructions
Animations - GSAP
All animations are handled by GSAP and are controlled through the use of a custom attribute on each animated element.
Animations that fire when the page loads use the data-gsap-onload attribute. Animations that fire when the element is scrolled into view all share the data-gsap-onscroll attribute.
On-scroll animations fire once when the top of the element reaches 95% of the window height - or in other words; when the element's top has scrolled 5% into the viewport.
On-load animations are used to reveal (fade in) content that sits at the top of the page and is visible immediately when the page is loaded.
Animations that fire when the page loads use the data-gsap-onload attribute. Animations that fire when the element is scrolled into view all share the data-gsap-onscroll attribute.
On-scroll animations fire once when the top of the element reaches 95% of the window height - or in other words; when the element's top has scrolled 5% into the viewport.
On-load animations are used to reveal (fade in) content that sits at the top of the page and is visible immediately when the page is loaded.
Page load animations
data-gsap-onload="hero-stack-reveal"
Reveals parts of the hero content in the Hero Stack element.
data-gsap-onload="hero-image"
Reveals parts of the hero image in the Hero Stack element.
On-scroll animations:
data-gsap-onscroll="scroll-reveal"
A quick, but pleasing fade-in animation for revealing entire sections as they come into view. We suggest applying the attribute to the Main Container element inside the section for the animation to have most impact.
Smooth scroll (Lenis)
We have opted to include Lenis smooth scroll in this template. Lenis ensures that no matter which device your users are browsing on, the scrolling of the page will always be smooth rather than notchy, stepped, or jerky. See the Lenis Github for more information: https://github.com/darkroomengineering/lenis/blob/main/README.md
How we implemented Lenis
A custom CSS file is loaded in the head of the page in the site-wide custom code box in Site Settings.
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.15/dist/lenis.css">
Custom scripts have been added to the foot of the page in the site-wide custom code box in the site settings.
<script src="https://unpkg.com/lenis@1.3.15/dist/lenis.min.js"></script>
<script>
// Initialize Lenis
const lenis = new Lenis({duration: 0.7});
// Connect to GSAP ScrollTrigger
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => { lenis.raf(time * 1000);});
gsap.ticker.lagSmoothing(0);
</script>
<script>
// Initialize Lenis
const lenis = new Lenis({duration: 0.7});
// Connect to GSAP ScrollTrigger
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => { lenis.raf(time * 1000);});
gsap.ticker.lagSmoothing(0);
</script>
Settings were applied to tailor the scroll duration to 0.7 seconds. Adjust this value to suit your desired scroll speed:
const lenis = new Lenis({duration: 0.7});
Preventing smooth scroll on some elements
There may be some elements in your site that do not need smooth scrolling or do not function well with Lenis smooth scroll. In this case you can add data-lenis-prevent="" to the custom attributes of that element to prevent it from being handled by Lenis.
To deactivate Lenis
To completely deactivate Lenis Smooth Scroll, remove the code mentioned above from the site-wide custom code boxes in site settings.