Bricksforge Panel

The Bricksforge Panel is a core feature of Bricksforge, providing a powerful and flexible tool for working with JavaScript Events, GSAP Timelines, and more inside the builder.

Benefits

What are the benefits of using the Bricksforge Panel?

• Events - You can easily listen to JavaScript events for any element in your project, including the document, window, and body. This gives you a lot of flexibility when it comes to adding custom functionality to your projects. You can also take advantage of Bricks-specific events, such as those related to the Slider element.
• Event Actions - When an event is triggered, you can perform a variety of actions, including adding/removing classes, changing attributes, running a GSAP Timeline, and much more.
• GSAP Animations - Create stunning GSAP Animations without writing any code. If you are a developer, you can also use custom animation objects to have full control over your animations.
• Easy to use Despite its many powerful features, the Bricksforge Panel is easy to use and intuitive. You can quickly and easily create new events, actions, and animations, and manage them all from a single, easy-to-use interface.

If you want to add some custom functionality to your project, or you want to create stunning animations, the Bricksforge Panel is the perfect tool for this job.

How to use

After activating the extension, you will see a new icon in the top bar of the builder. Clicking on this icon will open the Bricksforge Panel.

Alternatively, you can use the keyboard shortcut Ctrl + P to open the panel.

If you’ve previously opened the panel, it will stay open even after refreshing the page.

Panel Toolbar

The panel toolbar contains a number of useful buttons and options. On the left side, you see the navigation. Here, you can switch between the different tabs in the panel.

On the right side, you see the following buttons:

• Save: Saves the current data.
• Minimize / Maximize: Minimizes or maximizes the panel.
• Focus Mode: The Focus Mode is an alternative design for the panel, which shows the controls on the left side. This is useful when you want to have more space for the preview, especially when creating animations.
• Change Timeline Layout: Only available in the Timelines tab. This button allows you to change the layout of the timeline. With the new layout, the timeline will be displayed in a single row below all other columns.

Clicking the “cog” icon, you will see the following options:

• Grid Customization: You can customize the grid by changing the number of columns and the column width.
• Horizontal Scroll: You can enable or disable the horizontal scroll. This is useful when you want to have more space for the columns on smaller screens.
• Visible Bricks Panels: If enabled, the Bricksforge Panel will always leave space for the Bricks Panels.
• Disable Float (Auto Adjust Builder Height): If enabled, the builder will not behave like a float element. The builder height will be adjusted automatically to fit the content. This way, you can always reach the bottom elements of the builder.
• Save also Bricks Builder when saving: If enabled, the Bricks Builder will also be saved when you save the Bricksforge Panel. This saves you one click.

Tip: Double clicking on the panel toolbar will minimize the panel.

Dynamic Data

The entire Bricksforge Panel accepts Bricks Dynamic Data. You can use Dynamic Data with the following syntax:

{dynamic:your_dynamic_data_tag}

Example: To output the post id of a page, you can use {dynamic:post_id}.

If you want to output event specific data, take a look on the Template Variables section.

Events

Understanding Events

In web development, an event is an action or occurrence that takes place on a webpage. These can include things like clicking a button, scrolling the page, or typing into a form field. JavaScript allows you to listen for and respond to these events, by running code or triggering actions when a certain event occurs.

For example, you might want to show a popup message when someone clicks a button on your webpage. You can use JavaScript to listen for the “click” event on that button, and then run code to display the popup message.

Events are a key part of building dynamic and interactive web pages, and JavaScript provides a wide range of built-in events to work with. By using events and JavaScript together, you can create powerful, responsive web experiences for your users.

The Bricksforge Panel makes it easy to listen for and respond to JavaScript events, without having to write any code.

Event Instances

An event instance is a specific instance of an event. For example, if you want to listen for the “click” event on a button, you would create an event instance for that button. You can then add actions to that event instance, which will be triggered when the button is clicked.

You can create a new Event Instance by clicking the Create Your First Instance button in the Events tab. If you have already created some event instances, you can click the + button to create a new one.

Rename your event instance by just editing the name in the # New Instance field.

Right clicking on an event instance will display a context menu with the following options:

• Duplicate: Duplicates the selected event instance.
• Export: Exports the selected event instance as a JSON file.
• Disable: Disables the selected event instance. This will prevent the event instance from being triggered.
• Delete: Deletes the selected event instance.

To import an event instance, click the Import icon. This will open a file picker, allowing you to select a JSON file containing an event instance. Once you have selected a file, the event instance will be imported and added to the list of event instances.

Now you are ready to add an event to your instance.

Section: Event

In the Event section, you can setup the event that will trigger your event instance. You can choose from a wide range of built-in events.

The following settings can be configured:

Choose an event

Select the event that will trigger your event instance. You can choose from a wide range of built-in events, including:

On Pageload

The “On Pageload” event is triggered as soon as the page has finished loading its content. It is useful when you want to run code immediately after the page has loaded, such as displaying a welcome message or changing DOM data, which is not available until the page has loaded.

Read more about the DOMContentLoaded event

On Scroll Position

The “On Scroll Position” event is triggered when the user scrolls to a specific position on the page. This means you can use this event to trigger an action when the user reaches a certain part of the page. For example, you can use this event to trigger an animation or to display a specific element once the user has scrolled to a particular point on the page.

This event will display the following Event Settings:

• Operator: Choose the operator to use when comparing the scroll position. You can choose from Is Equal (==), Is Greater Than (>), Is Less Than(<), Is Equal or Greater Than (>=) and Is Equal or Less Than (<=).
• Scroll Position: Enter the scroll position to compare against. This has to be a number, and it represents the number of pixels from the top of the page.

Read more about the scroll event

On Scroll Up

The “On Scroll Up” event is triggered when the user scrolls up on the page. You can use this event to trigger certain actions when the user scrolls up. For example, you could make an element disappear, or you could trigger an animation.

Read more about the scroll event

On Scroll Down

The “On Scroll Down” event is triggered when the user scrolls down on the page. You can use this event to trigger certain actions when the user scrolls down. For example, you could make an element appear, or you could trigger an animation.

Read more about the scroll event

On Visibility Change

The “On Visibility Change” event is triggered when the user changes the visibility of the page. This means you can use this event to trigger an action when the user switches to another tab, or when the user minimizes the browser window.

This event will display the following Event Settings:

• Trigger If Visibility State Is: Choose the visibility state to trigger the event. You can choose from Visible and Hidden. Visible means the page is visible to the user, and Hidden means the page is not visible to the user.

Read more about the visibilitychange event

In Viewport

The “In Viewport” event is triggered while an element is in the viewport. This means you can use this event to trigger an action when an element is visible on the page. Important: This element will fire multiple times while the element is in the viewport.

This event will display the following Event Settings:

• Visibility Setting: Choose between Comes To Viewport and Completely Visible. Comes To Viewport means the element will trigger the event when it comes into the viewport, and Completely Visible means the element will trigger the event when it is completely visible in the viewport.
• Offset: The “Offset” setting allows you to adjust the position at which the event will be triggered. This value has to be a number and represents the number of pixels.

Not In Viewport

The “Not In Viewport” event is triggered while an element is not in the viewport. This means you can use this event to trigger an action when an element is not visible on the page. Important: This element will fire multiple times while the element is not in the viewport.

On Window Resize

The “On Window Resize” event is triggered when the user resizes the browser window.

Read more about the resize event

On Click

The “On Click” event is triggered when the user clicks on an element.

Read more about the click event

On Double Click

The “On Double Click” event is triggered when the user double clicks on an element.

Read more about the dblclick event

On Mouseover

The “On Mouseover” event is triggered when the user hovers over an element. Be aware that this event will fire multiple times while the user hovers over the element. If you want to trigger an action only once, you should use the On Mouseenter event instead.

Read more about the mouseover event

On Mouseenter

The “On Mouseenter” event is triggered when the user hovers over an element. This event will only fire once, even if the user hovers over the element multiple times.

Read more about the mouseenter event

On Mouseleave

The “On Mouseleave” event is triggered when the user moves the mouse away from an element. This event will only fire once, even if the user moves the mouse away from the element multiple times.

Read more about the mouseleave event

On Mousedown

The “On Mousedown” event is triggered when the user presses the mouse button while the pointer is inside the element.

Read more about the mousedown event

On Mouseup

The “On Mouseup” event is triggered when the user releases the mouse button while the pointer is inside the element.

Read more about the mouseup event

On Mousemove

The “On Mousemove” event is triggered when the user moves the mouse while the pointer is inside the element.

Read more about the mousemove event

On Touchstart

The “On Touchstart” event is triggered when the user touches the screen while the pointer is inside the element. This is useful for touch devices, such as mobile phones and tablets.

Read more about the touchstart event

On Touchend

The “On Touchend” event is triggered when the user removes the finger from the screen while the pointer is inside the element. This is useful for touch devices, such as mobile phones and tablets.

Read more about the touchend event

On Touchmove

The “On Touchmove” event is triggered when the user moves the finger across the screen while the pointer is inside the element. This is useful for touch devices, such as mobile phones and tablets.

Read more about the touchmove event

On Touchcancel

The “On Touchcancel” event is triggered when the user removes the finger from the screen while the pointer is inside the element. This is useful for touch devices, such as mobile phones and tablets.

Read more about the touchcancel event

On Keydown

The “On Keydown” event is triggered when the user presses a key on the keyboard.

Read more about the keydown event

On Keyup

The “On Keyup” event is triggered when the user releases a key on the keyboard.

Read more about the keyup event

On Pointer Down

The “On Pointer Down” event is triggered when the user presses the mouse button or a finger on the screen while the pointer is inside the element.

Read more about the pointerdown event

On Pointer Up

The “On Pointer Up” event is triggered when the user releases the mouse button or a finger from the screen while the pointer is inside the element.

Read more about the pointerup event

On Pointer Over

The “On Pointer Over” event is triggered when the user moves the mouse or a finger over the element.

Read more about the pointerover event

On Pointer Out

The “On Pointer Out” event is triggered when the user moves the mouse or a finger away from the element.

Read more about the pointerout event

On Pointer Move

The “On Pointer Move” event is triggered when the user moves the mouse or a finger while the pointer is inside the element.

Read more about the pointermove event

On Pointer Enter

The “On Pointer Enter” event is triggered when the user moves the mouse or a finger over the element. This event will only fire once, even if the user moves the mouse or a finger over the element multiple times.

Read more about the pointerenter event

On Pointer Leave

The “On Pointer Leave” event is triggered when the user moves the mouse or a finger away from the element. This event will only fire once, even if the user moves the mouse or a finger away from the element multiple times.

Read more about the pointerleave event

On Pointer Cancel

The “On Pointer Cancel” event is triggered when the user removes the finger from the screen while the pointer is inside the element. This is useful for touch devices, such as mobile phones and tablets.

Read more about the pointercancel event

On Submit

The “On Submit” event is triggered when the user submits a form.

Read more about the submit event

On Change

The “On Change” event is triggered when the user changes the value of an input field. This event occurs when the selection, the checked state, or the contents of an element have changed.

Read more about the change event

On Input

The “On Input” event is triggered when the user changes the value of an input field. This event occurs when the text content of an element is changed through the user interface.

Read more about the input event

On Focus

The “On Focus” event is triggered when the user focuses on an element. This event occurs when the user clicks on an element or uses the tab key to navigate to it.

Read more about the focus event

On Blur

The “On Blur” event is triggered when the user removes focus from an element. This event occurs when the user clicks outside of an element or uses the tab key to navigate away from it.

Read more about the blur event

ResizeObserver

The “ResizeObserver” event is triggered when the size of an element changes. The size could change because the user resizes the browser window, or because the user resizes the element itself.

This event will display the following Event Settings:

Read more about the ResizeObserver event

MutationObserver

The “MutationObserver” event is triggered when the content of an element changes. The content could change because the user edits the content, or because the user adds or removes data from the element. Mutation Observers are useful for elements that are not updated automatically. For example, if you have a text element that is updated by a JavaScript function, you can use a Mutation Observer to trigger an action when the text changes.

This event will display the following Event Settings:

• Observe Attributes: If this option is enabled, the event will be triggered when the attributes of the element change.
• Observe Child List: If this option is enabled, the event will be triggered when the child elements of the element change.
• Observe Character Data: If this option is enabled, the event will be triggered when the text content of the element changes.
• Observe Subtree: If this option is enabled, the event will be triggered when the child elements of the element change. This option is only available if the “Observe Child List” option is enabled.

Read more about the MutationObserver

On Slide Move

This is a Bricks Slider (Splide) specific event. The “On Slide Move” event is triggered when a slide is moved. This event will fire each time a slide is moved, even if the slide is moved by the user.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Moved

This is a Bricks Slider (Splide) specific event. The “On Slide Moved” event is triggered when a slide is moved. The difference between this event and the “On Slide Move” event is that this event will fire after the slide has been moved, while the “On Slider Move” event will fire before the slide has been moved.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Visible

This is a Bricks Slider (Splide) specific event. The “On Slide Visible” event is triggered when a slide becomes visible.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Hidden

This is a Bricks Slider (Splide) specific event. The “On Slide Hidden” event is triggered when a slide becomes hidden.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Click

This is a Bricks Slider (Splide) specific event. The “On Slide Click” event is triggered when the user clicks on a slide.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Resize

This is a Bricks Slider (Splide) specific event. The “On Slide Resize” event is triggered when the size of a slide changes.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Resized

This is a Bricks Slider (Splide) specific event. The “On Slide Resized” event is triggered when the size of a slide has been changed. The difference between this event and the “On Slide Resize” event is that this event will fire after the slide has been resized, while the “On Slider Resize” event will fire while the slide is being resized.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Drag

This is a Bricks Slider (Splide) specific event. The “On Slide Drag” event is triggered when the user drags a slide.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Dragging

This is a Bricks Slider (Splide) specific event. The “On Slide Dragging” event is triggered when the user is dragging a slide. The difference between this event and the “On Slide Drag” event is that this event will fire while the user is dragging the slide, while the “On Slider Drag” event will fire when the user starts dragging the slide.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Dragged

This is a Bricks Slider (Splide) specific event. The “On Slide Dragged” event is triggered when the user has finished dragging a slide.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

On Slide Overflow

This is a Bricks Slider (Splide) specific event. The “On Slide Overflow” event is triggered when the total width of slides gets wider/narrower than the list element.

This event will display the following Event Settings:

• Slider ID: The ID of the slider that contains the slide. Enter the Slider ID without prefixes. Example: qznrjl. The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

Custom Event

If you want to trigger an event that is not listed above, you can use the “Custom Event” event. This event will allow you to trigger any event that you want, as long as you know the event name.

This event will display the following Event Settings:

• Event Name: The name of the event that you want to trigger. Example: myCustomEvent.

On Live Update

With Pro Forms, you can specify Live Update Selectors to inject the value coming from the database to the DOM. Whenever a value changes trough Live Update, the this event is triggered.

Event Trigger

The Select Element(s) (Trigger) option allows you to select the element(s) that will trigger the event. This selector will be used to create the event listener.

Insert a selector, for example #my-button or .my-button or use the icon to pick an element from the page. This will insert the selector automatically in the field.

After inserting the selector, you can choose between the following options:

• Exactly this element: This option will create the event listener only for the element that matches the selector.
• All elements with this selector: This option will create the event listener for all elements that match the selector.
• This element and all siblings: This option will create the event listener for the element that matches the selector and all of its siblings.
• Parent element: This option will create the event listener for the parent element of the element that matches the selector.
• All children: This option will create the event listener for all children of the element that matches the selector.
• Closest: This option will create the event listener for the closest element that matches the selector. You can specify the selector of the closest element in the new added “Selector” field.

Event Settings

For each event, you can set the following Event Settings:

• Delay: This setting allows you to delay the creation of the event listener for a certain amount of time, specified in milliseconds. This can be useful in situations where you want to wait for an element to exist on the page before creating the event listener.
• Console Log: This setting allows you to log the event to the browser console. This can be useful for debugging purposes.
• Loading Conditions: You can use this setting to specify where this event should be loaded. You can choose between Everywhere and Specific pages. If you choose Specific pages, you can specify the page IDs in a comma-separated list. Example: 1,2,3.

Some Events will have additional Event Settings. You can read more about in the description of the related event.

Event Conditions

You can use conditional logic to control when the event listener is created. This can be useful in situations where you want to create the event listener only if a certain condition is met.

To setup conditional logic, click on the “Conditional Logic” icon.

This will open the Conditional Logic modal window. In this window, you can setup the conditions that will be used to determine if the event listener should be created.

You can read more about how to setup conditional logic in the Setup Conditional Logic section.

Section: Action

The “Action” section allows you to perform actions when the event is triggered. You can add as many actions as you want, and they will be executed in the order that they are added.

To add an action, click on the + icon. You can change the order of the actions by dragging and dropping them.

Once you have added an action, the section Action Settings will display the settings for the selected action. This allows you to configure the action.

This is the list of available actions:

Basics

Show

This action will show a specific element and make it visible. Using this, the display property of the element will be set to block or to an alternative value of your choice.

Action Settings:

• Display: This setting allows you to set the display property of the element. This can be useful in situations where you want to use a different display value than block. Example: flex.

Hide

This action will hide a specific element and make it invisible. Using this, the display property of the element will be set to none.

Add Class

This action will add a CSS Class to your specified element(s).

Action Settings

• CSS Class: Enter the name of the CSS Class that you want to add to the element(s) without dot. Example: my-class.

Remove Class

This action will remove a CSS Class from your specified element(s).

Action Settings

• CSS Class: Enter the name of the CSS Class that you want to remove from the element(s) without dot. Example: my-class.

Toggle Class

This action will toggle a CSS Class on your specified element(s). If the element(s) have the CSS Class, it will be removed. If the element(s) don’t have the CSS Class, it will be added.

Action Settings

• CSS Class: Enter the name of the CSS Class that you want to toggle on the element(s) without dot. Example: my-class.

Set Attribute

This action will set an attribute to your specified element(s).

Action Settings

• Attribute Key: Enter the name of the attribute that you want to set on the element(s). Example: data-color.
• Attribute Value: Enter the value of the attribute that you want to set on the element(s). Example: blue.

Remove Attribute

This action will remove an attribute from your specified element(s).

Action Settings

• Attribute Key: Enter the name of the attribute that you want to remove from the element(s). Example: data-color.

GSAP

GSAP Timeline

This action will fire a GSAP Timeline which has been created in the Timelines tab.

Action Settings

• Animation Action: You can choose between Play, Pause, Restart, Resume and Reverse
• Timeline: Select the timeline that you want to fire.
• Timescale: Enter the timescale of the timeline. This value will be multiplied with the duration of the timeline. Example: 2 will make the timeline twice as fast, and 0.5 will make the timeline twice as slow.
• What should be animated: You can choose between Animate All and Animate Trigger. If you choose Animate All, all elements that are animated in the timeline will be animated. If you choose Animate Trigger, only the element that triggered the event will be animated.

GSAP Flip

This action will create smooth transitions between two states using GSAP Flip. You can read more about in the GSAP Flip Docs. In short words: You can animate any CSS property of an element, and the element will be animated from its current state to the new state.

Action Settings

• Flip Method: Choose the method that you want to use to create the flip animation.
  • Add Class Enter the name of the CSS Class. All styles you created for this class will be used to animate the element.
  • Remove Class Enter the name of the CSS Class. All styles you created for this class will be used to animate the element.
  • Toggle Class Enter the name of the CSS Class. All styles you created for this class will be used to animate the element.
  • New Dom Position Enter the new position of the element in the DOM. The element will be animated to this position. This option will display a new field where you can enter the selector of the element that should be used as a reference for the new position. Example: #my-element
  • Custom Allows you to write custom JavaScript code. You can do whatever you want here. Example: target.style.backgroundColor = 'blue'. You can use the following variables: trigger, target and event, which are references to the element that triggered the event, the element that has been selected as action target and the event object.
  • Additional Properties Allows you to add additional properties that will be used to animate the element. You can add as many properties as you want, separated by a comma. Example: fontSize, color. Use this if you want to animate properties that are not supported out of the box.
  • Duration Enter the duration of the animation in seconds. Example: 0.5
  • Ease Enter the ease of the animation. Example: power1.inOut
  • Include Children If you want to animate all children of the element, check this option.
  • Position: Absolute If you want to animate the element with position: absolute, check this option.

GSAP Set

This action will set a CSS property of your specified element(s) using GSAP.

Action Settings

• Javascript Object: A valid JavaScript object that contains the properties that you want to set.

  Example:

  {
      backgroundColor: 'blue',
      margin: '10px'
  }

  You can use the “code” icon to open a code editor where you can write your JavaScript object.

GSAP To

This action will animate a CSS property of your specified element(s) using GSAP.

Action Settings

• Javascript Object: A valid JavaScript object that contains the properties that you want to set.

  Example:

  {
      backgroundColor: 'blue',
      margin: '10px'
  }

  You can use the “code” icon to open a code editor where you can write your JavaScript object.

Video

Play Video

This action will play a video which is included in your page. Important: Embedded videos (e.g. YouTube) are not supported. The video must be included in your page using the video tag.

The target selector will be used to select the video element.

Pause Video

This action will pause a video which is included in your page. Important: Embedded videos (e.g. YouTube) are not supported. The video must be included in your page using the video tag.

The target selector will be used to select the video element.

Stop Video

This action will stop a video which is included in your page. Important: Embedded videos (e.g. YouTube) are not supported. The video must be included in your page using the video tag.

The target selector will be used to select the video element.

Local Storage

Set Local Storage Item

This action will set a value in the local storage. Using the local storage is a good way to store data that you want to use later in your page.

Action Settings

• Storage Key: Enter the name of the key that you want to set.
• Storage Value: Enter the value that you want to set.

Remove Local Storage Item

This action will remove a value from the local storage.

Action Settings

• Storage Key: Enter the name of the key that you want to remove.

Session Storage

Set Storage Item

This action will set a value in the session storage. The difference between the session storage and the local storage is that the session storage will be cleared when the user closes the browser tab.

Action Settings

• Storage Key: Enter the name of the key that you want to set.
• Storage Value: Enter the value that you want to set.

Remove Storage Item

This action will remove a value from the session storage.

Action Settings

• Storage Key: Enter the name of the key that you want to remove.

Bricks

Sync Sliders

This action will sync two sliders which have been created using the Bricks Slider element.

Action Settings

To sync two sliders, you need to click Add. This will open a new section where you can enter the Slider IDs of the sliders that you want to sync. You can add as many sliders as you want. Just fill out the ID Slider 1 and ID Slider 2 fields and click Save. Now the sliders will be synced.

The slider ID is a part of the ID which is automatically generated for the slider element. Example: If your element ID is #brxe-abcde, the slider ID is abcde.

Forms

Populate Form Field

This action will populate a form field with a value.

Action Settings:

• Field Value: Enter the value that you want to populate the form field with. To use event data, you can use template tags. Example: Your choice is: {event:target:value} to populate the form field with the value of the element that triggered the event.

Advanced

JavaScript

This action will allow you to write custom JavaScript code. You can do whatever you want here.

You can use the following variables:

• trigger This is a reference to the element that triggered the event. Type: HTMLElement
• event This is a reference to the event object. Type: Event
• timelines This is an object that contains all timelines that you have created with the Bricksforge Panel.
• getTimeline(id) This is a function that allows you to get a timeline by its ID. Type: Function. Example: await getTimeline('570ce438-41fe-565b-153e-413311cd8dfa'). Important: This function is asynchronous. You need to use the await keyword to get the timeline object. Otherwise you will get a promise.

You can use the “code” icon to open a code editor where you can write your JavaScript code and use the autocomplete features.

Server

Call Ajax Function

This action will allow you to perform an AJAX request. You can use this to send data to a server or to get data from a server.

• Function Name: Enter the name of the PHP function that you want to call. Example: myAjaxFunction
• Function Data: This repeater field allows you to add data that will be sent to the server. You can add as many data fields as you want. Each data field has the following settings:
  • Key: Enter the key of the data field. Example: name
  • Value: Enter the value of the data field. Example: John Doe
• Call also for logged out users: If you want to allow logged out users to call this function, check this option. Otherwise, the ajax request will be aborted if the user is not logged in.
• Live Update Selector: If you want to use Live Update Selectors, you can enter the selector of the element that you want to update. Example: #my-element. If you enter a Live Update Selector, you can choose between different insert methods.
• Insert Method: If you have entered a Live Update Selector, you can choose between the following insert methods:
  • Replace HTML: This will replace the HTML of the element with the response from the server.
  • Append HTML: This will append the response from the server to the element.
  • Prepend HTML: This will prepend the response from the server to the element.
  • Replace Text: This will replace the text of the element with the response from the server.
  • Append Text: This will append the response from the server to the text of the element.
  • Prepend Text: This will prepend the response from the server to the text of the element.
• Show Response in console: If you want to log the response from the server to the browser console, check this option. This can be useful for debugging purposes.

Bricksforge automatically creates example code for your considering your entered data. You need to copy this code and paste it into your functions.php. You can also use plugins like WPCodeBox. Important: Bricksforge does not create logic for you. You need to write the logic yourself.

Send Email

This action will allow you to send an email using AJAX and takes the following settings:

• Choose Email Designer Template: The Template ID of the Email Designer Template that you want to use.
• To: The email address of the recipient.
• Subject: The subject of the email.
• Message: The message of the email.

If you leave those informations empty, it will automatically use the informations from the Email Designer Template.

Important: For Security Reasons, only logged in users with the capability edit_posts can send emails via ajax. (since 2.1.0).

If you want to allow all visitors to send emails, you can define the following constant in your wp-config.php file:

define('BRICKSFORGE_ALLOW_UNAUTHENTICATED_AJAX_EMAILS', true);

Be aware that this can be a security risk!
You should only use this option if you know what you are doing.

Update Option

This action will allow you to update an option in the WordPress database using AJAX.

• Option Name: The name of the option that you want to update.
• Option Value: The value of the option that you want to update.
• Live Update Selector: If you want to use Live Update Selectors, you can enter the selector of the element that you want to update. Example: #my-element. Once the option has been updated, the element will be updated with the new value.
• Insert Method: If you have entered a Live Update Selector, you can choose between the following insert methods:
  • Replace HTML: This will replace the HTML of the element with the new value.
  • Append HTML: This will append the new value to the element.
  • Prepend HTML: This will prepend the new value to the element.
  • Replace Text: This will replace the text of the element with the new value.
  • Append Text: This will append the new value to the text of the element.
  • Prepend Text: This will prepend the new value to the text of the element.

Important: For Security Reasons, only logged in users with the capability manage_options can update options via ajax. (since 2.1.0).

Delete Option

This action will allow you to delete an option in the WordPress database using AJAX.

• Option Name: The name of the option that you want to delete.

Important: For Security Reasons, only logged in users with the capability manage_options can delete options via ajax. (since 2.1.0).

Action Settings

Some actions have individual settings that are displayed in the Action Settings section. You can find more information about these settings in the description of the related action.

However, most actions will have the following settings:

Action Conditions

You can add conditions to your actions. This allows you to only perform the action if the conditions are met.

To setup conditional logic, click on the “Conditional Logic” icon.

This will open the Conditional Logic modal window. In this window, you can setup the conditions that will be used to determine if the event listener should be created.

You can read more about how to setup conditional logic in the Setup Conditional Logic section.

Target Element

This setting allows you to select the element that you want to perform the action on. You can choose between the following options:

• Same Element: This will perform the action on the same element that triggered the event.
• Triggered Element: If your event listen to multiple elements, this will perform the action on the element that triggered the event.
• All elements with this selector: This will perform the action on all elements that match the selector that triggered the event.
• This element and all siblings: This will perform the action on the element that triggered the event and all of its siblings.
• Parent Element: This will perform the action on the parent element of the element that triggered the event.
• All children: This will perform the action on all children of the element that triggered the event.
• Closest: This will perform the action on the closest element that matches the selector that triggered the event. You can specify the selector in the Selector setting. This option traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified selector.
• Query Selector (Starting Point: Trigger Selector): This option allows you to specify a selector that will be used to find the element that you want to perform the action on, starting from the element that triggered the event.
• Custom (Document QuerySelector): This option allows you to specify a selector that will be used to find the element that you want to perform the action on, starting from the document root.
• Custom (Document QuerySelectorAll): This option allows you to specify a selector that will be used to find the elements that you want to perform the action on, starting from the document root. The difference between this option and the “Custom (Document QuerySelector)” option is that this option will return all elements that match the selector, while the “Custom (Document QuerySelector)” option will return only the first element that matches the selector.

Selector

Some actions or target element options will require you to specify a selector. This setting allows you to specify the selector that will be used to find the element that you want to perform the action on.

Example: #my-element or .my-element.

Except

This setting allows you to exclude specific elements from the action. You can specify a selector that will be used to find the elements that you want to exclude.

• None: This will not exclude any elements.
• Triggered Element: This will exclude the element that triggered the event. (Useful when creating event listeners for multiple elements)

Delay

This setting allows you to delay the execution of the action for a certain amount of time, specified in milliseconds. This can be useful in situations where you want to wait for an element to exist on the page before performing the action.

Example: 250

Setup Conditional Logic

You can add conditions to your events and actions. This allows you to only perform the event or action if the conditions are met. By clicking the “Conditional Logic” icon, a new modal window will open where you can setup the conditions.

The following conditions are available:

Template Variables

You can use template variables to insert dynamic values into your action settings or conditions. To use a template variable, you need to wrap the variable name in curly brackets. Example: {variable_name}.

The following template variables are available:

{eventType}

This variable will be replaced with the type of the event that triggered the event listener. Example: click

{eventTarget}

This variable will be replaced with the selector of the element that triggered the event listener. Example: #my-element

{eventTimestamp}

This variable will be replaced with the timestamp of the event that triggered the event listener. Example: 1621234567890

{eventCharCode}

This variable will be replaced with the char code of the event that triggered the event listener. Example: 13 for the enter key.

{eventAltKey}

This variable will be replaced with the alt key of the event that triggered the event listener. Example: true or false.

{eventCtrlKey}

This variable will be replaced with the ctrl key of the event that triggered the event listener. Example: true or false.

{eventShiftKey}

This variable will be replaced with the shift key of the event that triggered the event listener. Example: true or false.

{eventRepeat}

This variable will be replaced with the repeat key of the event that triggered the event listener. Example: true or false.

{eventKey}

This variable will be replaced with the key of the event that triggered the event listener. Example: Enter or NumpadEnter

{eventCode}

This variable will be replaced with the code of the event that triggered the event listener. Example: Enter or NumpadEnter

{eventLocation}

This variable will be replaced with the location of the event that triggered the event listener. Example: 0 for the standard location.

{eventButton}

This variable will be replaced with the button of the event that triggered the event listener. Example: 0 for the left mouse button.

{eventClientX}

This variable will be replaced with the client x of the event that triggered the event listener. Example: 100 for the x position of the mouse pointer.

{eventClientY}

This variable will be replaced with the client y of the event that triggered the event listener. Example: 100 for the y position of the mouse pointer.

{eventPageX}

This variable will be replaced with the page x of the event that triggered the event listener. Example: 100 for the x position of the mouse pointer.

{eventPageY}

This variable will be replaced with the page y of the event that triggered the event listener. Example: 100 for the y position of the mouse pointer.

{eventScreenX}

This variable will be replaced with the screen x of the event that triggered the event listener. Example: 100 for the x position of the mouse pointer.

{eventScreenY}

This variable will be replaced with the screen y of the event that triggered the event listener. Example: 100 for the y position of the mouse pointer.

{eventX}

This variable will be replaced with the x of the event that triggered the event listener. Example: 100 for the x position of the mouse pointer.

{eventY}

This variable will be replaced with the y of the event that triggered the event listener. Example: 100 for the y position of the mouse pointer.

{eventTouchCount}

This variable will be replaced with the touch count of the event that triggered the event listener. Example: 1 for a single touch.

{eventScale}

This variable will be replaced with the scale of the event that triggered the event listener. Example: 1 for no scaling.

{eventRotation}

This variable will be replaced with the rotation of the event that triggered the event listener. Example: 0 for no rotation.

{eventTargetName}

This variable will be replaced with the name of the element that triggered the event listener. Example: my-element

{eventTargetType}

This variable will be replaced with the type of the element that triggered the event listener. Example: div

{eventTargetValue}

This variable will be replaced with the value of the element that triggered the event listener. Example: my-value

{eventTargetValidity}

This variable will be replaced with the validity of the element that triggered the event listener. Example: true or false.

{eventTargetChecked}

This variable will be replaced with the checked state of the element that triggered the event listener. Example: true or false.

{eventTargetFilesCount}

This variable will be replaced with the files count of the element that triggered the event listener. Example: 1 for a single file.

{eventDataTransferTypesCount}

This variable will be replaced with the types count of the data transfer of the event that triggered the event listener. Example: 1 for a single type.

{eventDataTransferText}

This variable will be replaced with the text of the data transfer of the event that triggered the event listener. Example: my-text

{windowScrollX}

This variable will be replaced with the x position of the window scroll. Example: 100 for the x position of the window scroll.

{windowScrollY}

This variable will be replaced with the y position of the window scroll. Example: 100 for the y position of the window scroll.

{windowInnerWidth}

This variable will be replaced with the inner width of the window. Example: 100 for the inner width of the window.

{windowInnerHeight}

This variable will be replaced with the inner height of the window. Example: 100 for the inner height of the window.

{windowOuterWidth}

This variable will be replaced with the outer width of the window. Example: 100 for the outer width of the window.

{windowOuterHeight}

This variable will be replaced with the outer height of the window. Example: 100 for the outer height of the window.

{eventTargetOffsetTop}

This variable will be replaced with the offset top of the element that triggered the event listener. Example: 100 for the offset top of the element.

{eventTargetOffsetLeft}

This variable will be replaced with the offset left of the element that triggered the event listener. Example: 100 for the offset left of the element.

{eventTargetOffsetWidth}

This variable will be replaced with the offset width of the element that triggered the event listener. Example: 100 for the offset width of the element.

{eventTargetOffsetHeight}

This variable will be replaced with the offset height of the element that triggered the event listener. Example: 100 for the offset height of the element.

{postId}

This variable will be replaced with the ID of the current post. Example: 1234.

{formField:fieldName}

This variable will be replaced with the value of a form field. Example: {formField:my-field}. The fieldName should be the name of the form field. In HTML, this is the name attribute of the form field.

{formData:formId}

This variable will be replaced with the payload of a form. Example: {formData:my-form}. The formId should be the ID of the form. In HTML, this is the id attribute.

Flexible Variable Syntax

Since Bricksforge 1.0.5, you can use a more flexible way to output event data. Example: {event:target:value}. This will output the value of the element that triggered the event listener. You can use this syntax to output any event data. What this syntax means? The first part event is required and specifies that you want to output event data. All other parts, separated by a colon, are specifying the event data that you want to output. In the example above, the second part target specifies that you want to output the target element. The third part value specifies that you want to output the value of the target element.

Other examples:

• {event:target:name} This will output the name of the target element.
• {event:x} This will output the x position of the mouse pointer.
• {event:target:offsetTop} This will output the offset top of the target element.

Element Node

This condition allows you to check if a specific element has a specific class or attribute.

Local Storage

This condition allows you to check if a specific key exists in the local storage or if has a specific value.

Session Storage

This condition allows you to check if a specific key exists in the session storage or if has a specific value.

Custom

This condition allows you to write custom JavaScript code. The return value of the code will be used to determine if the condition is met. If the return value is true, the condition will be met. If the return value is false, the condition will not be met.

Examples:

document.querySelector("#my-element") !== null;

Returns true if the element exists, otherwise it returns false.

document.querySelector("#my-element").style.width > 680;

Returns true if the element has a width greater than 680px, otherwise it returns false.

window.innerWidth > 680;

Returns true if the window width is greater than 680px, otherwise it returns false.

Timelines

GSAP Timelines are really powerful. They allow you to create complex animations with ease.

Understanding Timelines

A GSAP Timeline is a powerful tool used in web development to create and manage complex animations. Think of it as a timeline that controls the sequencing and timing of individual animation elements.

In more detail, a GSAP Timeline is an object that you create using JavaScript, which allows you to group together multiple animations and control their start times, durations, and sequencing. It’s like a movie timeline that allows you to sequence different scenes and control how long each scene lasts, but for web animations.

Here’s an example: let’s say you want to create an animation where an image slides in from the left, then text fades in, and finally a button bounces up. You could create separate animations for each of these elements, but using a GSAP Timeline, you can group them together and control their timing as a unit.

This allows you to create complex, multi-step animations that are easy to manage and modify. You can also control the entire timeline, pause, restart, or reverse it, and even control the speed or direction of the animation.

GSAP Timelines can also be controlled using Event Actions. This makes the Bricksforge Panel so powerful.

Create a Timeline

To create a timeline, click on the “Create Your First Timeline” button. If you already have a timeline, you can click on the + icon. This will create a new timeline.

To change the name of the timeline, click on the name # New Timeline and type a new name.

Right clicking on the timeline item, will open a context menu with the following options:

• Duplicate: This will duplicate the timeline.
• Export: This will export the timeline as a JSON file.
• Copy Timeline ID: This will copy the timeline ID to the clipboard. This can be used for the Event Action JavaScript, using the helper function getTimeline(id) to get the timeline object.
• Disable: This will disable the timeline. This can be useful when you want to temporarily disable a timeline, without deleting it. Disabled timelines will not be executed.
• Delete: This will delete the timeline.

To import a timeline, click on the “Import” icon. This will open a modal window where you can select a JSON file that contains the timeline data. The imported timeline will be added to the end of the list.

Timeline Settings

You can define the following settings for your timeline:

Match Media Rule

This setting allows you to define a match media rule that will be used to determine if the timeline should be executed. If the rule is not met, the timeline will not be executed.

Example:

(min-width: 768px)

In the example above, the timeline will only be executed if the viewport width is greater than or equal to 768px.

Trigger

This setting allows you to choose the trigger that will start the timeline. The following triggers are available:

• ScrollTrigger: This will start the timeline when the element enters the viewport.
• Pageload: This will start the timeline when the page loads.
• Click: This will start the timeline when the element is clicked.
• Hover: This will start the timeline when the element is hovered.
• Custom: This will not fire the timeline automatically. You can use Event Actions to play the timeline manually.

Default Controls

Trigger Selector

This setting allows you to specify a selector that will be used to find the element that will trigger the timeline. Using the “pointer” icon, you can pick the element from the page.

Note: If your animation is not working in the frontend and you’re using the Bricks Setting Add Element ID & class as needed, make sure that the selector really exists in the frontend. If the selector doesn’t exist, the timeline will not be executed. In this case, you need to set a custom ID or a CSS class to the element and use it as a selector.

Handle triggers separately

If you’re using multiple triggers with the same class on a page, with this setting each one will be treated separately. This way you can have different timelines for each trigger. Without this setting, all triggers with the same class will be treated as one trigger and fire on the same time once the first trigger is fired.

As Array

This setting is to animate multiple elements sharing the same class. Each element is triggered and animated individually. This is particularly useful for creating complex animations where each element within the same class needs to be addressed separately. This is similar to ‘Handle Triggers separately, but allows more flexibility.

Repeat

This setting allows you to repeat the timeline. Default: 0 (no repeat). You can also specify -1 to repeat the timeline indefinitely.

ScrollTrigger Controls

Scroll Start

This setting allows you to define the scroll position where the timeline will start. Default: top bottom. (The animation will start when the top of the element hits the bottom of the viewport).

Examples:

• top top - The animation will start when the top of the element hits the top of the viewport.
• +=100px - The animation will start when the top of the element hits the bottom of the viewport, plus 100px.
• -200px top - The animation will start 200 pixels above the top of the viewport.
• +=50% bottom – The animation will start when the bottom of the element is 50% of the way down the viewport, plus the height of the element.

You can read more about the available possibilities here.

Scroll End

This setting allows you to define the scroll position where the timeline will end. Default: bottom top. (The animation will end when the bottom of the element hits the top of the viewport).

Examples:

• bottom bottom - The animation will end when the bottom of the element hits the bottom of the viewport.
• +=100px - The animation will end when the bottom of the element hits the top of the viewport, plus 100px.
• -200px bottom - The animation will end 200 pixels below the bottom of the viewport.
• +=50% top – The animation will end when the top of the element is 50% of the way up the viewport, plus the height of the element.

You can read more about the available possibilities here.

Toggle Actions

Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order.

The default is: play none none none. This means: play the animation when entering, don’t do anything when leaving, don’t do anything when entering backwards, and don’t do anything when leaving backwards.

So toggleActions: play pause resume reset will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: play, pause, resume, reset, restart, complete, reverse, and none.

Use Scrub

This setting allows you to enable scrubbing. This means that the timeline will be scrubbed (played) when you scroll the page. When scrolling up, the timeline will be reversed. When scrolling down, the timeline will be played forward.

• Smooth Scrub Value: This setting allows you to define the smooth scrub value. Default: 1. The higher the value, the smoother the scrubbing will be.

Use Batch

Normally, each ScrollTrigger will fire its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? That could get awkward to do manually. ScrollTrigger.batch solves this problem. Activating Batch, Handle triggers separately will be deactivated.

A practical use case for this feature is when you have a bunch of elements that are staggered in a timeline and you want to play them when they enter the viewport.

You can read more about batch here.

Use Stagger

This setting allows you to stagger the timeline. Staggering means that the timeline will be played for each trigger separately, with a delay between each animation.

• Amount: The total amount of time (in seconds) that gets split among all the staggers. So if amount is 1 and there are 100 elements that stagger linearly, there would be 0.01 seconds between each sub-tween’s start time. If you prefer to specify a certain amount of time between each tween, use the each property instead. Default: 0.2.
• From: Determines where the stagger should start. Default: start. You can use the following values:
  • Start - The stagger will start from the beginning of the timeline.
  • End - The stagger will start from the end of the timeline.
  • Center – The stagger will start from the center of the timeline.
  • Edges – The stagger will start from the edges of the timeline.
  • Random - The stagger will start from a random position in the timeline.
• Ease: The ease function to use for the stagger.

Use ToggleClass

This setting allows you to toggle a CSS class on the trigger element when the timeline starts and ends.

• Target: The Selector of the element that will have the CSS class toggled.
• Class Name: The name of the CSS class that will be toggled.

Use Pin

This setting allows you to pin the trigger element to the viewport. This means that the element will stay in the same position when you scroll the page.

• For Selector: The Selector of the element that will be pinned. If empty, it will be just rendered as pin: true. Leave it empty if you want to pin the trigger element.
• Pin Spacing: By default, the pinned element will be placed directly below the trigger element, but you can use the “pinSpacing” property to adjust the distance between the pinned element and the trigger element. This way, you can create a “sticky” effect. Default: Enabled.

Use Snap

This setting allows you to snap the trigger element to the viewport. This means that the element will snap to the top or bottom of the viewport when you scroll the page.

When using snap, set the scroll trigger selector to the parent element of the elements you want to snap, for example: #brx-content.

• Snap To: This setting allows you to define where the element will snap to. Default: 0.33. This means: the element will snap to the top of the viewport when it reaches 33% of the viewport height.
• Automatic Snap: This setting allows you to enable automatic snapping and requires a selector. When enabled, the element will calculate the values based on your entered selector.
• Snap Duration: This setting allows you to define the duration of the snap animation. Default: 0.3.
• Snap Delay: This setting allows you to define the delay of the snap animation. Default: 0.1.
• Snap Ease: This setting allows you to define the ease function of the snap animation.

Show Markers

This setting allows you to show markers on the timeline. This is useful for debugging and testing. The markers can be seen in the frontend only.

Loading Conditions

You can use this setting to specify where this timeline should be loaded. You can choose between Everywhere and Specific pages. If you choose Specific pages, you can specify the page IDs in a comma-separated list. Example: 1,2,3.

Click Trigger Controls

With Secondary Click

This setting allows you to enable the secondary click trigger. This means that the timeline will be played when you click the trigger element and will be reversed when you click it again.

Reverse Animation Selector

This setting allows you to specify a selector that will be used to find the element that will reverse the timeline. For example, you could use the selector of a close button to reverse the timeline when the close button is clicked.

Reverse when clicking outside

This setting allows you to reverse the timeline when you click outside the trigger element.

Exclude Animation Layers

This setting appears only when you have selected the Reverse when clicking outside option. It allows you to exclude animation layers from the reverse functionality. This may be useful if opening a menu, for example, and you don’t want the menu to close when clicking inside.

Excluded Selectors

This setting allows you to exclude specific elements from the click trigger. This will prevent the animation to trigger. This includes the selector itself and its children. Example: #my-element, .my-element

Timescale

Enter the timescale of the timeline. This value will be multiplied with the duration of the timeline. Example: 2 will make the timeline twice as fast, and 0.5 will make the timeline twice as slow.

Hover Trigger Controls

Reverse on mouse leave

This setting allows you to reverse the timeline when you hover out of the trigger element.

Excluded Selectors

This setting allows you to exclude specific elements from the click trigger. This will prevent the animation to trigger. This includes the selector itself and its children. Example: #my-element, .my-element

Timescale

Enter the timescale of the timeline. This value will be multiplied with the duration of the timeline. Example: 2 will make the timeline twice as fast, and 0.5 will make the timeline twice as slow.

Create an Animation

Click the + icon to create a new animation. You can create as many animations as you want. The animations will be played in the order that you create them. You can reorder the animations by dragging them up or down.

Animation Settings

Animation Name

A custom name you can set for the animation for a better organization. This name is only used in the Bricksforge Panel and will not be visible in the frontend.

Selector

The Selector of the element that will be animated. You can use any CSS selector. Click Use Trigger to automatically use the trigger selector.

Method

The method that will be used to animate the element. You can use any of the following methods:

• To: The element will be animated from its current state to the new state that you define.
• From: The element will be animated from the state that you define to its current state.
• From To: The element will be animated from the state that you define to the new state that you define.

Animation Object

The JavaScript Object that will be used to animate the element. You can use almost all CSS properties and some special, GSAP related properties.

Example Objects for To method:

{
    x: 100,
    y: 100,
    opacity: 0,
}

This will animate the element to the right by 100px, to the bottom by 100px, and to opacity 0.

{
    color: "blue",
    backgroundColor: "#000000",
    borderColor: cssVar("--color-primary"),
}

This will animate the element to the color blue, to the background color black, and to the border color of the --color-primary CSS variable.

As you can see in the last example, you can also use CSS Variables for the values using the helper function cssVar(name, context). The context parameter is optional and can be used to define the context of the CSS variable.

Note: Your CSS properties must be in camelCase format. For example: background-color should be backgroundColor. border-radius should be borderRadius. Also, if you use non numeric values, you must use quotes. For example: color: "blue" instead of color: blue.

You can use the “Code” icon to open the animation object in the Code Editor.

Duration

The duration of the animation in seconds. Default: 1.

Delay

The delay of the animation in seconds. Default: 0.

Ease

The ease function of the animation.

Position

The position of the animation in the timeline. You can use the following values:

• End of the previous animation - The animation will start at the end of the previous animation. (Default)
• Start of the previous animation - The animation will start at the start of the previous animation.
• Custom – The animation will start at the time that you define in the Custom Position setting.

Custom Positions are relative to the start of the timeline. For example, if you have 2 animations and you set the first animation to start at 0 and the second animation to start at 1, the second animation will start 1 second after the first animation.

More Examples:

• 3 – 3 seconds past the start of the timeline
• +=1 – 1 second past the end of the timeline (creates a gap)
• -=1 – 1 second before the end of the timeline (overlaps the previous animation)
• <+=3 – 3 seconds past the start of the previous animation
• >-0.5 – 0.5 seconds before the end of the previous animation. It’s like saying “the end of the previous animation plus -0.5”

You can read more about the different ways to define positions in the GSAP documentation.

Use Split Text

This setting allows you to split the text of the element into multiple spans. This is useful if you want to animate the text letter by letter or word by word.

• Type: The type of the split. You can use the following values:
  • Chars - The text will be split into characters.
  • Words - The text will be split into words.
  • Lines - The text will be split into lines.

If Split Text is enabled, the animation object will be applied to the spans instead of the element.

Use Stagger

This setting allows you to stagger the animation. This means that the animation will be delayed for each element that is animated. The difference between this setting and the “Stagger” setting in the Trigger Settings is that this setting will only stagger the animation of the current animation, while the “Stagger” setting will stagger the animation of all animations in the timeline.

• Stagger: The delay between each element in seconds. Default: 0.02.

Use Yoyo

This setting allows you to enable the yoyo effect. This means that the animation will be reversed after it has finished.

Prevent Fouc

This setting allows you to prevent the flash of unstyled content (FOUC). This means that the element will be hidden until the animation has started. Clicking this button, a class .brf-prevent-fouc will automatically be added to the element. You also can add this class manually.

Animation Controls

Since Bricksforge Version 0.9.7, you can use the visual animation controls to create your animations. This way you don’t have to write the animation object in the Code Editor.

If you are an expert and you prefer to write the animation object in the Code Editor, you still can. The visual animation controls and the animation object are synced, so you can use both at the same time.

Using the visual animation controls is very easy.

1. Open the Animation Control you want to use, for example: Translate.
2. Enter your value by dragging the slider or by entering the value in the input field.
3. Optionally: change the unit of the value, if supported by the control.

You will live see the changes in the preview.

A yellow dot will appear on the timeline when you change the value of an animation control. This means that this value is active and will be animated.

To reset the value of an animation control, hover over the yellow dot and click the x button. This will reset the value. Now, the animation control will not be animated.

Tip: You can see the code output of your animation control settings clicking the Code icon beside the “Animation Controls” label. This is useful if you want to learn how to write the animation object manually in the Code Editor.

Utility Controls

When building your animations, you can use some helper functions to preview your animation or to just to force the rendering.

The following helpers are available:

• Run: This will run the animation. You can use this to preview your animation.
• Render: This will force the rendering of the animation. This is useful if something is not working as expected.
• Clear Animation Styles: This will clear all animation styles from the element. This is useful if you want to reset the element to the initial state to have a better overview.

DrawSVG

Since Bricksforge 0.9.9, you can use DrawSVG to animate SVG paths. It is important to understand, that DrawSVG can only animate strokes. It cannot animate fills. So if choosing your SVG you want to animate, make sure that the paths you want to animate have strokes.

Can I also animate SVGs without strokes?

Yes, you can! How? Just add a stroke to the SVG manually. The Bricks “SVG” element gives you this possibility. After adding a stroke, you can animate it with DrawSVG. If setting the fill to transparent, your animation will look even better. Finally, you could animate the fill back to the initial value.

How to use DrawSVG?

The only important thing is to animate the path, line, polyline, polygon, rect or ellipse of the SVG. You cannot animate the svg element itself. This means, your “Animation Selector” should look like this:

Example: #my-svg path.

If the above example, the #my-svg is the “Trigger Selector” and the #my-svg path is the “Animation Selector”. This will animate all paths inside the SVG with the ID my-svg.

Animating 3D Models

Bricksforge can help you to animate 3D models. 3D Models needs to be included using the Bricksforge 3D Model element.

How to animate 3D Models?

3D Models can be animated the same way as any other element. The only difference is that 3D Models are using different animation controls. Those controls are specific to 3D Models and are not available for other elements.

To animate a 3D Model, use the selector of your “3D Model element” as the “Animation Selector”. Bricksforge will automatically detect it as 3D Model and show you a toggle “Animate 3D Model”. Switching this toggle to “On” will enable the 3D Model animation controls. Here, you have different options.

Control “What to animate?”

• Model: This will animate the whole model.
• Camera: This will animate the camera.

Choosing one of the options will open an additional select field with the following options:

• Position: This will animate the position of the model or camera.
• Rotation: This will animate the rotation of the model or camera.
• Scale: This will animate the scale of the model or camera.

Now, you can animate the different axis of the selected option using the dedicated animation controls for each axis.

Troubleshooting

The animation not works in the frontend

Are you using the Bricks Setting “Add Element ID & class as needed”? If yes, make sure that the selector really exists in the frontend. If the selector doesn’t exist, the timeline will not be executed. In this case, you need to set a custom ID or a CSS class to the element and use it as a selector.

I cannot see the Visualization Panel

The Visualization Panel is only visible if you have at least one animation in your timeline and if the trigger selector exists on this page.