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.
Page load animations
data-gsap-onload="hero-stack-reveal"
Reveals parts of the hero content in the Hero Stack element.
data-gsap-onload="motif-strip-reveal"
Reveal animation of the thin image motif strip at the top of some elements.
data-gsap-onload="above-the-fold-text"
Gradually fades in text, word by word.
data-gsap-onload="above-the-fold-reveal"
Sequentially, in quick succession, fades in all elements that the attribute is applied to. This is one of the most-used interactions throughout the design and is responsible for the majority of non-home-page above-the-fold choreography.
The following on-load attributes are used on unique bento arrangements in hero sections across a range of pages, giving the user the option to edit each page's introduction individually if they need. These interactions handle fading in and scaling of background images, as well as fading in tiles and other content within hero bento arrangements:
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.
data-gsap-onscroll="large-text-cta-reveal"
Fades in letter-by-letter the text in all H2 and Display Heading elements within the attributed element then fades in buttons within the attributed element.
data-gsap-onscroll="cta-motif-reveal"
Scale in animation for background images in full-image CTA sections. Applies only to background images with Motif Image class.
data-gsap-onscroll="motif-strip-reveal"
Reveal animation to scale in the background image of the thin image motif strip present at the top of some elements.
data-gsap-onscroll="timeline-ticker-line"
Reveals line-by-line the horizontal lines in the timeline element. Does not apply to vertical timeline lines.
Icons
This template uses SVG icons housed in code embed blocks rather than using standard images from the media browser. This approach allows us to take advantage of some key SVG features that facilitate switching seamlessly between light and dark color schemes.
Why are all icons in code embeds?
Code embedded SVG icons can make use of the SVG currentColor feature, which allows us to change the color of the icon dynamically in the Webflow interface, and allows light and dark color schemes. Icons from the media browser are placed in the page as an <img> tag, and cannot take advantage of the currentColor feature.
Where can I find the icon pack?
Visit the Licenses page to find the icon pack that was used in this template.
How do I change icons or upload other icons?
Choose the icon you want to edit on the page and edit the code for the icon by clicking the blue gear icon.
Delete the existing code for the icon
Upload your chosen icon by dragging and dropping the SVG file of your new icon into the code box. You should see the code of your new icon appear in the code box. If this does not work you can open the SVG icon file in a text editor like VSCode and copy/paste the code into the code embed in Webflow.
My icon is not reacting to the color scheme - why?
To make the new icon adopt the color scheme of the template you need to make some changes to its code. Find all instances of hex color codes within the icon and change them to currentColor. For example, look in the code for fill="#272727" or stroke="#272727" and replace with fill="currentColor" or stroke="currentColor".
My icon is not the right size - why?
Most SVG icons define their own size, which sets how they appear on a web page. We want the icon to respect the template's rules for icon sizing, so we need to edit the icon's code to remove its initial height and width definition. Open the icon's code and look at the top line. You should see something like height="24" width="24". Remove these attributes. For example if your icon code looks like:
Using SVG logos inside a code embed allows the logo to dynamically adapt to light and dark color schemes, as well as any other color changes you make in the variables settings. The same applies to all icons in this template. See the help section on Icons for a further explanation.
How to add logos
To add a customer/client logo, you must already have that logo in SVG format. Duplicate an existing logo. The existing logo should already have class Customer Logo. Edit the existing SVG code by clicking the blue gear icon on the code embed element. This brings up the code editor, where you will see the code for the existing logo. Delete the existing code and drag/drop your icon SVG into the box, which will fill with the code of the new logo.
How do I set the size of my logo?
Add a unique class to the logo eg. Acme. Your logo should then have classes like: Customer LogoAcme This allows us to set the aspect ratio.
To set the ratio adjust the width and height values in the Ratio section of the Size settings in the Style sidebar. Adjust the height and width values until the blue bounding box just touches all edges of the logo.
Optionally add classes XXS, XS, S, L, XL, XXL to control the size of the logo.
My logo is still not the right size - why?
Most SVG logos define their own size in their code, which sets how they appear on a web page. We want the logo to respect the template's rules for sizing, so we need to edit the logo's code to remove its initial height and width definition and add a style attribute to force 100% height. Open the logo's code and look at the top line. You should see something like height="100" width="400". Remove these attributes. For example if your logo code looks like:
Each logo is unique and has a unique shape (a unique aspect ratio of height to width). This makes it difficult to arrange logos automatically in a row or a grid based on their width. For this reason, we've chosen to apply a specific width:height ratio to each unique logo via a custom class, which provides a cross-browser way to size logos using just a width setting.
My logo is not reacting to the color scheme - why?
To make the new logo adopt the color scheme of the template you need to make some changes to its code. Find all instances of hex color codes within the logo and change them to currentColor. For example, look in the code for fill="#272727" or stroke="#272727" and replace with fill="currentColor" or stroke="currentColor". The same rule also applies to all icons in the template.
Light / Dark mode
To enable dark mode on your page, add the class Dark Mode to the body element. There is a light/dark mode switch in all footers which uses GSAP to add and remove the class and make the color scheme change. Our demo shows a floating control in the lower left corner of the window but this should be removed in your final site.
⚠️ Important
Do not delete the Dark Mode class.
Note: Classes which are not applied to any element in Webflow will be deleted if a class cleanup is carried out. To prevent accidental deletion and cleanup of this important class, it has been applied to an element on the 404 page where it is highly unlikely to be removed.
How to publish with a permanent dark mode color scheme
Add the Dark Mode class to the body of each of your pages.
Remove the switch from the footer so that the user can't modify the color scheme.
Publish your site
This ensures that the colour scheme will be dark on each page permanently.
Persisting color scheme changes across pages
When the user changes the color scheme on the current page, it will reset to the default (light) scheme each time the user navigates to a different page in the site. This can be fixed by adding a script to each page, so the user's choice is remembered in the browser. On each page there is a code embed block titled Persistent Color Scheme Script at the top of the tree, just inside the body element. The code embed is a component, so editing the code on one page will update the script on each page throughout the site. Note: The code embed block must be the first child of the body in order to work seamlessly. Moving the code embed to a different place in the tree will cause unpredictable flashes of white between pages.
Templates sold on the Webflow Marketplace are not permitted to use custom code such as this, so we provide it for you to add after purchase.
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.
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.
