Explore Our

Customizing colors

This template utilizes the Webflow variables feature, allowing you to effortlessly modify all colors, which will be promptly updated across the entire site.

To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.

SVG element color

In order to change the color of SVGs, Download .svg file from Assets and open it to any text editor. Change HEX color code with color of your choice and replace updated .svg file with the current file.

Changing fonts

To adjust the font family, navigate to the Variables panel, then choose the font family you wish to modify.

If you want to change fonts, you can always go to Site Settings > Fonts. There, you will be able to upload custom fonts, use Google Fonts, or even connect your Adobe Fonts account.

Once you've uploaded a font from Site Settings, navigate to the Variables panel, then choose the font family you uploaded.

Starter Page

The “Starter Page” template provides a solid foundation for building your pages. It includes a pre-designed header, footer, and a blank section with a container to help you get started quickly.

Duplicate the Starter Page and start editing or adding sections from other pages.

Template Support

We'll be glad to help you out with your queries. Please contact us at the Webflow template support page and you shall hear back very soon.

Duplicate the Starter Page and start editing or adding sections from other pages.

Important notes:

• SVG: For the best visual experience, we recommend using SVG icons and logotypes. You can explore a wide selection of SVG icons on Icon Finder or download them from the Iconstica icons web app.
• Resize your Images: It is important to resize your images before adding them to your website, rather than simply downloading and placing them as they are. The size and resolution of an image can have a significant impact, and using an image size of 1200px x 800px for a content size of 300px x 200px is unnecessary. Resize it to 300px x 200px.
• Image Formats: There are mainly 2 common file types that are used for web images which are JPEG and PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images.
• Compress images: For a better loading site, compress existing image to AVIF or WebP files with the built-in Image conversion tool.
• Clean up: Clean up interactions and Clean up CSS styles before publishing your site.
• Audit panel: Before going live with your site, find and fix accessibility issues with Webflow's Audit panel.
• SEO: Before publishing your site, make sure to edit the Title Tag, Meta Description, etc. For more information on SEO and how to optimize your website, Visit Add SEO title and meta description and SEO and Webflow: the essential guide.

How to Edit GSAP Animations

This section explains how GSAP animations are implemented in your site andhow to customize or remove them if needed.

Elements Map

The following classes are used to apply GSAP animations:

.has_fade_anim :      Fades and slides elements from top, bottom, left, right, or in (fade only) on scroll or page load.
‍.img_anim_reveal:     Reveals image with zoom effect on scroll.
‍.has_char_anim:     Animates each character of text (SplitText) with staggered opacity and movement.
‍.has_word_anim:     Similar to .has_char_anim, but animates by word instead of character.
‍.has_text_reveal_anim:    Reveals text characters with a vertical slide and fade-in effect.
‍.has_text_move_anim:   Animates text lines with 3D perspective and rotation (like flipping in).
‍.img_anim_group_scale img / .has_image_zoom img:   Smooth zoom-in or zoom-out effect while scrolling.
‍.nb_common_img, .nb_common_img_alt:  Adds/removes .is-inview class using IntersectionObserver when images enter the viewport.
‍

Customizing Key Variables

You can control each animation using data-* attributes on the HTML elements. Below is a list of common variables and how to change them:Fade Animation (.has_fade_anim)
‍

<div class="has_fade_anim"
    data-fade-from="left"
    data-fade-offset="100"
    data-duration="1.2"
    data-delay="0.3"
    data-ease="power4.out"
    data-on-scroll="1">
 Content
</div>

Removing GSAP Animations

To completely disable the animation:
‍
Option 1: Remove the class Simply delete the has_fade_anim class from your HTML element.

Option 2: Comment/remove the JS blockIn your main JavaScript file, comment out or delete this entire GSAP logic block: