Instructions

How Can I Edit Globally a Heading, Paragraph, Links, etc.?

Select the Element: Click on the element you wish to edit (this could be a heading, paragraph, link, etc.).

‍Open the Style Panel: On the right-hand side, open the Style Panel where you can manage all style-related settings.

‍Select the Global Element: Under the "Selector" field at the top of the Style Panel, choose the option that says "All [element name]". For example, if you are editing a heading, it will show "All H1 Headings" or "All Paragraphs" for a paragraph.

‍Apply Styles: Once selected, any changes you make to typography, color, spacing, etc., will apply globally to all instances of that specific element type throughout the project.

How Can I Create a Symbol for Reusable Elements?

Select the Element(s): Highlight the element or group of elements you want to reuse.

Right-click: Select "Create Symbol" from the context menu.

Name the Symbol: Give your symbol a meaningful name (e.g., "Footer" or "Navbar").

Use It Across Pages: Now, you can drag this symbol into any page to reuse it across your template.

How Do I Add Interactions to an Element?

Select the Element: Click the element you want to animate.

Go to Interactions Panel: On the right-hand side, click the "Interactions" tab.

Add Interaction: Choose from scroll, hover, or click interactions and customize them.

Preview and Save: Test your interaction and save when satisfied.

How Do I Set a Responsive Image?

Select an Image: Click on the image you want to set as responsive.

Open Style Panel: Adjust the width to "100%" and set the max-width value as necessary.

Check on Different Devices: Preview how the image behaves on tablet and mobile devices using the device preview mode.

How Do I Add a Form to My Page?

Drag and Drop a Form Block: From the Elements panel, drag the "Form Block" into your page.

‍Customize Fields: Add or remove input fields, buttons, or text areas as needed.

‍Style the Form: Use the Style Panel to edit the appearance of the form elements (fields, labels, buttons).

‍Set Up Form Notifications: In the settings panel, configure the form submission notification email.

How to Edit GSAP Animations

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

Element Map

All GSAP-powered animations are applied to elements with the class:

.has_fade_anim
What it does: Fades and slides the element into view from a direction (top, bottom, left, right, or in for just fading) based on scroll position or page load.

Customizing Key Variables

Each animated element can be fine-tuned using HTML data-* attributes:

<div class="has_fade_anim"
     data-fade-from="left"
     data-fade-offset="100"
     data-duration="1.2"
     data-delay="0.4"
     data-ease="power4.out"
     data-on-scroll="1">
  Your content here
</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 block

In your main JavaScript file, comment out or delete this entire GSAP logic block: