Instructions
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.
Hero Heading (GSAP)
The Hero Heading stagger animation on the Home page is powered by custom GSAP code. This code is applied to the “Hero Heading” component by default.
How to enable and configure:
- Open the Components panel and add the “Hero Heading” component anywhere on the page.
- Select the component in the Navigator panel.
- In the Properties panel on the right, configure the following fields:
Text— the heading text to display.Duration— the duration of each character’s animation, in seconds.Delay— the delay before the animation starts, in seconds.Stagger— the delay between each character’s animation, in seconds.Ease— one of the default GSAP easing values, for example “power2.out”. See the full easing list here: https://gsap.com/resources/getting-started/Easing/.
How to disable the animation:
To disable the animation, set the following property values to “0”: Duration and Stagger.
Services Carousel (GSAP)
The draggable services carousel on the Home page is powered by custom GSAP code. This functionality allows any block to be dragged horizontally within its parent container. To activate this feature, at least two elements are required: a parent block with the “overflow: hidden” property applied in the Style panel, and a child block placed inside it.
How to enable and configure:
- Select the wrapper (parent) block in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attributes:
data-carousel="wrapper"— defines the wrapper (parent) block of the carousel.data-carousel-mass="1.36"— controls how “heavy” the carousel feels after releasing it from dragging. - Select the inner (child) block in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attribute:
data-carousel="inner"— defines the inner (child) block of the carousel.
How to disable the animation:
To disable the animation, remove all the data atributes from the parent and child blocks.
Draggable Images (GSAP)
The draggable image blocks in the Playground section on the Home page are powered by custom GSAP code. This functionality allows any block to be dragged along both the X and Y axes within its parent container. To activate this feature, at least two elements are required: a parent block with the “overflow: hidden” property applied in the Style panel, and a child block placed inside it.
How to enable and configure:
- Select the wrapper (parent) block in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attributes:
data-draggable="wrapper"— defines the wrapper (parent) block for draggable items. - Select the draggable item (child) block in the Navigator panel.
- Open the Settings tab in the right-hand panel.
- Add the following custom attribute:
data-draggable="item"— defines the draggable (child) block.
How to disable the animation:
To disable the animation, remove all the data atributes from the parent and child blocks.
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
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
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.
Rydge
Studio
