Kanbanize - Webflow HTML website template

Client First

This template uses Client-first naming convention. Please check out the documentation for more information.

Icon Embedded SVG Code

Most commonly used icons, such as social media icons, are implemented using embedded HTML SVG codes to easily manage it with size and colors. If you wish to change these icons, you can extract the SVG code from your design and replace the existing code in the HTML. For guidance on editing the embedded element in Webflow, please refer to this link. If you are using Figma, you can utilize the "Copy as SVG" option and paste the generated code into Webflow. To ensure proper functionality in terms of size and color, be sure to update and include the following values in the SVG code

No Membership

The template pages, including Sign Up, Login page are manually added and do not fall under the Webflow membership feature.

Blog Tabs Setup

Tabs are pre-configured for categories.

To change categories:
1. Go to the Blog page
2. Open the Tabs component
3. Select a Tab Pane
4. Update the Collection List filter to match your desired category

Note: Tabs are static and need to be manually updated when adding new categories.

Features Tabs Setup

Tabs are pre-configured for features.

To change categories:
1. Open the Tabs component
2. Select a Tab Pane
4. Update the Collection List filter to match your desired category

Note: Tabs are static and need to be manually updated when adding new categories.

Locations Tabs Setup

Tabs are pre-configured for locations.

To change categories:
1. Open the Tabs component
2. Select a Tab Pane
4. Update the Collection List filter to match your desired category

Note: Tabs are static and need to be manually updated when adding new categories.

GSAP in Custom Code

How to Edit GSAP Animations

‍This template uses GSAP in custom code for button hover animations.

‍Element Map
The animation is attached to .primary_button and affects these edge elements: .top-left, .top-right, .bottom-right, and .bottom-left.

‍What You Can Edit
You can change the animation speed by editing the duration value, and change the motion style by editing the ease value inside each gsap.to() call.

‍How to Remove It
To disable the animation, remove or comment out the GSAP code inside the button hover event. This will keep the layout intact, but the edge elements will no longer animate.

‍Note
This animation does not use ScrollTrigger. After making changes, save and republish the site.