How to start?
GSAP
You can apply a GSAP-powered text reveal animation to any text element in this template.
How to Enable and Configure:
- Select the text element in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attributes:
data-animation="chars"
Reveals the text character by character.
data-animation="lines"
Reveals the text line by line.
Important: Do not use both chars and lines on the same element.
data-animation-start="top 80%"
Defines when the animation starts, based on the element's position in the viewport. (Format: ScrollTrigger-style position string)
data-animation-delay="0.5"
Delay before the animation starts (in seconds).
data-animation-duration="1.5"
Duration of each item’s (character or line) animation (in seconds).
data-animation-stagger="0.07"
Delay between each item's animation (in seconds).
data-animation-x="5"
Horizontal offset before the animation starts. (Supports px, em, %, etc.)
data-animation-y="1em"
Vertical offset before the animation starts. (Supports px, em, %, etc.)
data-animation-opacity="0"
Initial opacity before the animation starts.
data-animation-actions="play reverse play reverse"
Makes the animation replayable every time the element enters or exits the viewport.
Course
If you don't have experience with Webflow, we recommend enrolling in the Webflow 101 Crash Course. This course will help you learn the basic possibilities of Webflow and understand the Webflow design process.
Starter Page
To create a new page, follow these steps:
- Use the "Starter Page" found in the "Template" folder as your base.
- Duplicate this page and modify the Name and Parent Folder as needed.
- Copy any content section from other pages and paste it into your new page.
Spacing
To manage vertical spacing, we've used the utility classes "Margin Bottom". To add bottom space to an element, wrap it into a <div> tag with applied one of the following classes:
- Margin Bottom Extra Small
- Margin Bottom Small
- Margin Bottom Medium
- Margin Bottom Large
- Margin Bottom Extra Large
Colors
All the colors in this template are set globally using Webflow variables. You can modify any color across the entire website in the variables panel.
Fonts
Primary and secondary fonts in this template are set globally using Webflow variables. You can modify any font family across the entire website in the variables panel. To change other font parameters of your website, click on the "Body" element in the Navigator panel, then select the "Body (All Pages)" selector from the Style selector dropdown in the Style panel. Afterward, modify the font parameters in the Typography section.
SVG Icons
To change the color of an SVG icon, follow these steps:
- Open the Assets panel.
- Download the SVG icon file.
- Open it using a code or text editor.
- Locate and modify the color value within the code.
- Save the changes.
- Upload the modified icon to your Webflow website.
