Bricks Builder Animation Enhanced With Softlite Litemove

Built-in Bricks Animations vs Softlite Litemove Enhancements

Bricks Builder includes a variety of pre-built animations that can be applied to elements on your page. These animations are designed to be easy to implement and customize, but check out the video below to see how Litemove makes things even easier!

• Fade Animations:
  • Fade In/Out: Elements can smoothly appear or disappear.
  • Fade Up/Down/Left/Right: Elements can slide in or out while fading.
• Slide Animations:
  • Slide Up/Down/Left/Right: Elements slide in from the specified direction.
• Zoom Animations:
  • Zoom In/Out: Elements scale up or down, creating a zoom effect.
• Rotate Animations:
  • Rotate: Elements can rotate at specified angles.

Trigger Options

Animations can be triggered by different user actions or page events, providing dynamic interactivity.

• On Scroll:
  • Scroll into View: Animations are triggered as elements come into the viewport while the user scrolls.
• On Hover:
  • Hover Effects: Animations are activated when the user hovers over an element. Common effects include color changes, scaling, and shadow effects.
• On Load:
  • Page Load: Animations start as soon as the page or a particular element loads.

Animation Settings

These settings allow for detailed customization of how animations behave, making it easy to achieve the desired visual effect.

• Duration:
  • Set the length of time (in milliseconds) for the animation to complete. For example, a duration of 500ms for a fade-in effect.
• Delay:
  • Introduce a delay before the animation begins. Useful for staggering animations across different elements.
• Easing:
  • Choose the type of easing function to control the acceleration and deceleration of the animation. Options typically include linear, ease-in, ease-out, and ease-in-out.

Custom Animations

For users who need more control, Bricks Builder supports custom animations through CSS or JavaScript.

• CSS Animations:
  • Users can write custom CSS to define keyframes and apply these animations to elements using Bricks Builder’s interface.
• JavaScript Animations:
  • More complex animations can be created using JavaScript libraries such as GSAP (GreenSock Animation Platform). Users can include scripts directly within Bricks Builder.

Animation Chaining

Animation chaining allows multiple animations to be linked together, creating complex sequences.

• Sequential Animations:
  • Set one animation to start after another completes. For instance, an element can fade in, then slide up.
• Simultaneous Animations:
  • Trigger multiple animations to occur at the same time, such as rotating and scaling an element simultaneously.

Responsive Animations

Ensure that animations look good on all devices by adjusting settings based on screen size.

• Media Queries:
  • Use media queries to define different animation settings for mobile, tablet, and desktop views.
• Adaptive Design:
  • Simplify or disable animations on smaller screens to improve performance and user experience.

Examples and Use Cases

Fade In on Scroll

• Use Case: Gradually reveal content as the user scrolls down the page.
• Implementation: Apply a fade-in animation with a scroll trigger to text blocks, images, or sections.

Hover Effects on Buttons

• Use Case: Enhance interactivity for buttons and links.
• Implementation: Apply a zoom or color change effect on hover to make buttons stand out when users interact with them.

Loading Animations

• Use Case: Draw attention to key content as the page loads.
• Implementation: Use on-load triggers to animate hero images, headlines, or call-to-action buttons.

Benefits of Using Animations in Bricks Builder

Enhanced User Engagement

Animations can make a website more engaging by adding visual interest and interactivity, encouraging users to stay longer and interact more with the content.

Focus on Key Content

Use animations to highlight important information, such as calls to action or special offers, guiding users’ attention to where it’s most needed.

Visual Appeal

Animations contribute to a modern and dynamic look, making the website feel more professional and polished.

Potential Drawbacks

Performance Impact

While animations can enhance user experience, overusing them can lead to slower page load times and potential performance issues, especially on lower-end devices.

Complexity

Creating custom animations requires some knowledge of CSS or JavaScript, which can be challenging for users without a technical background.

Conclusion

Bricks Builder offers a robust set of animation features that cater to both beginners and advanced users. By providing a variety of built-in animations, flexible trigger options, and detailed customization settings, it enables users to create engaging and visually appealing websites. Custom animations and responsive design options further enhance its capabilities, making it a powerful tool for web designers and developers.

Enhanced Animation Using Litemove From Softlite

This video tutorial will show you how to use our animation visual editor and create animation effects without coding. As you may know, Zap is a fantastic JavaScript library for creating advanced animations on your websites. We’ve integrated this library into our visual builder to simplify your coding process. Instead of spending hours grappling with extensive Zap documentation, our Litemove Builder effortlessly handles it for you.

No time to watch the complete video? – here’s a transcript that will only take a couple of minutes to read…

Litemove is a standalone animation builder with a visual editor that is compatible with multiple website platforms. It works with all website platforms like WordPress or Webflow. It’s even more powerful if you’re familiar with popular page builders like Elementor, Bricks, Breakdance, Gutenberg, and more. This builder is compatible with any websites that require logging in.

In this demonstration, you’ll see the Litemove control panel where you can customize properties and relevant parameters. Next to the control panel is the editing timeline, also known as the timeline. The most notable feature is the effortless export of JavaScript code. You can apply these codes to your website, ensuring a streamlined and efficient process.

Let’s get started with creating a simple animation using our builder. First of all, you can access litemove.softlight.io. After registering for an account, you’ll be directed to the project dashboard. Click on “Add New Project” to initiate your first project. Enter the project name and the URL of your target website. Each project can contain multiple distinct pages, each associated with the parent website URL. If you want to apply animations to another website, you’ll need to create a new project. Click on “Create Project” to proceed.

In the next step, the dashboard will display the pages of your target site. You’ll need to manually add pages to bring them to the editor. There are two methods to achieve this:

1. You can directly embed the page URL into the provided box. For example, I’ll add a new demo page URL. Immediately, an item appears, and you can click on it to revise the added page.
2. For private websites or websites requiring logging in or websites structured by React, Angular, or Vue, you need to use the second method to add target pages. We’ve developed a Litemove extension for the Chrome browser. To start, go to your target page. Scroll down to the end of the page to make sure the loading page process is finished. Click on the extension icon, choose the corresponding project, and then click on “Add Page”.

In case a page has changed its interface compared to when you added it to the project, you need to refresh it by clicking on the refresh button on the item. Similarly, with the Litemove extension, you need to replace that page. Choose a project and page, then click on “Add Page”.

Returning to the current project dashboard, you’ll find the added page there. Click on “View Page”. There are two options for the timeline: you can import an existing one or create a new one. When creating your first timeline, a control panel instantly displays on the left of your screen by default. You can configure the parameters of the timeline by using the control tab. You can change the name of the timeline here.

The trigger you select in this section will be applied to the entire timeline. Currently, there are four options:

1. The default trigger is Page Load, so these elements’ animations will be triggered when the page loads.
2. For Scroll Action, animations start when the user scrolls down or up the elements.
3. Animation starts when the user clicks the elements.
4. Animation starts when the user hovers over the elements.

For the beginning demonstration, I choose Page Load and the trigger name for this timeline I call “Hero”. In Start When, you can even choose a specific page load method: HTML Loaded or Content Loaded. In practice, we recommend using Content Loaded when all the images are completely loaded. It provides a smoother experience and is suitable for lazy load settings. In this case, I choose HTML Loaded.

After that, click on the plus icon on the editing timeline to create an animation. Instantly, the animation control appears. You can use our selector detector to choose a specific element on the page. As an example, let’s create an animation for this heading. Simply click and drag the animation on the timeline to adjust its duration. This allows you to control how long the animation lasts.

Additionally, you can change the delay of the animation by adjusting its position on the timeline. Moving it forward will decrease the delay, while moving it backward will increase the delay. Customize your animation further by utilizing additional From and To tabs that include the properties to be animated. Let’s add a parameter for Translate Y in the From tab. You can type the unit right behind a value. When you only enter a value in this property, the default unit is pixels. I think increasing its duration is better, then click the play button to preview the animation. It’s really easy to use.

Similarly, in the To tab, you can define the final values for these properties. For example, you can enter 200 in Translate Y in this tab. If you set it by default, this animation starts from a position 100 pixels to the original point. If you set opacity to zero to achieve a smooth fade-in transition, this animation will be increased steadily to the default value of 1.

For another example, let’s add a new animation and adjust it on this current timeline. This animation will be applied to the description and will keep animating it on the vertical axis. I combine the Translate Y and opacity operations. Once again, you can adjust the delay of the animation by moving it on the editing timeline. I want this animation to be triggered immediately after the first animation ends.

There are a bunch of other functions you can apply. Enhance the appeal of your animations by employing various e-styles for added interest. For more details, you can refer to our documentation.

Back to the first animation, in an advanced utility, I will apply the function called Split Text. It enables you to effortlessly divide HTML text into lines. Scroll down to stagger each at just the appropriate time. As you can see, this text animates in sequence following the lines. In this custom box, you can customize extra parameters of properties that are unavailable in our control tab. For instance, I add a value of clipping path, then click on the play icon to check its performance.

Let’s experiment with different property values and combinations to achieve the desired visual effect. Remember, our visual editor provides a user-friendly interface for making these adjustments, making it easy to create complex animations without coding. I will make a new timeline for the next demonstration. The coming animations will apply for this section. Click on the timeline control tab and create a new timeline. You can keep the default timeline name or change it.

In the next step, you need to apply elements to trigger this whole timeline. I desire to trigger animation effects by this section. In the preview, there are two viewports displayed. They are basically the starting point to trigger animations and an ending point to stop them. By default, the trigger element starts from the top point. This means that the animation will start when the top of the element hits the bottom of the viewport. You are able to change the start viewport position by customizing its offset.

For example, I want the starting viewport to be higher in preview. This means that the hitting time is sooner than default. I revise the viewport offset to negative 250 pixels, then click the plus icon to add a new animation. Apply a specific element for this animation setup and customize its properties. To check the animation’s performance, click on live preview on the editing timeline and try to scroll the page down. As you can see, all animations in this section are triggered when the bottom start viewport hits the top of the section.

In addition, for this scroll action, there is a special feature called Scrub. For instance, I create a new animation with this feature and show you how it works. I’ll animate this text element and desire it to spin around. In the animation control tab, add a value with a degree unit in the rotation property. If the scrub feature is enabled, the animation will be scrubbed when the user scrolls the page. Scrubbing means that the animation will be played in real-time while the user scrolls the page. In the preview, as I scroll up or down, the text spins around and ceases to animate when I pause.

After all, save this timeline and you can export them to syncoding. Currently, we are using Brick’s page builder for this WordPress page. You can use their code element and embed animations and code here. If you also test it with this element, do not forget to enable both functions. Then save your page and check the final result.

As you can see, the animations are applied to the page settings in a quick and easy way. We hope you found this tutorial helpful in expanding your animation capabilities.

Still using Elementor? Check out our complete guide where we show you how to convert Elementor to Bricks Builder.