The Number Counter component is a versatile tool designed to dynamically animate numbers on your website. This component can be used to display statistics, countdowns, financial figures, percentages, and more. It provides a visually engaging way to showcase key data points and draw attention to important metrics.

Key Features

• Dynamic Animation: The numbers increment or decrement from a starting value to a target value.
• Customisable Prefix and Suffix: Add symbols or text before or after the numbers, such as currency signs or percentages.
• Adjustable Duration and Increment: Control the speed and steps of the animation for smooth transitions.

Usage Instructions

The only component that matters is the div with a class of “number-counter-wrapper” along with the basic text within it.

The div with a class of “number-counter-wrapper” has several attributes that can or should be applied. those marked with an * are optional.

• data-target-number: Set this attribute to the final number the counter should display.
• data-target-number-duration: (Optional) Specify the duration (in milliseconds) over which the animation should run, the default is 3000 (3 seconds).
• data-target-number-increment: (Optional) Define the increment size for the animation steps. The default value for the increment is 1 but you can change this by adding this attribute and a value.
• data-target-number-prefix: (Optional) Add a prefix, such as a currency symbol.
• data-target-number-suffix: (Optional) Add a suffix, like a percentage sign.
• data-target-number-max: (Optional) Set a maximum value to format the number display with leading zeros if necessary. If the max number and the target number have the same number of digits this is not required as by default leading zero are added that are equal to the number of digits in the target number. If you do not want leading zeros you can use this to remove them by setting this to 0.

This accordion is made up of sections that when hovered over pushes the other cards, to the side, narrowing them, while expanding itself to occupy the space previously taken by the other cards.

You can use this whole section or just take the accordion out and use it where you want.

This Accordion layout is perfect for FAQ Sections, Multi step forms, Documentation and more.

It is designed to work with or without a query loop and includes some custom javascript.

There are a couple of options you have with how this accordion works and this can be controlled by adding classes that relate to those options. Below are some controls that allow you to apply these options in this demo to see how each class effects the Accordion along with an explanation.

Animated infinitely scrolling Marque

All the styling and animations are done in CSS however to help simplify the CSS a small JavaScript function adds a css variable to each icon on load which represents the items off set. This can be set manually in the CSS but is as convenient as any additional icons would require the user to further update the CSS to accommodate the new logos.

Ultimately, the JS just makes it more easily maintainable and more easily scalable… it’s just a quality of life choice.

A Ken Burns style Slider.

This uses the Bricks Nestable Slider with a little custom CSS. The Nestable Slider uses a JS plugin called Splide and has the ability to manually set the Splide options. The link below takes you to the documentation on these options. We have addded one to this which is moveOnLoad. This ensures the active class is added to the incoming image when the transition starts rather than when it ends.

This was inspired by this video Bricks Builder: KEN BURNS LIKE EFFECT WITH NATIVE NESTABLE SLIDER by WP Easy – YouTube Channel

This hero section is split with content and CTA on the left with four hoverable images on the right which all have links associated with them to take you to some other page.

Full Width Split Hero with boxed content

A four column card group based on CSS Subgrid. Contains 1 image, header, body text and a button.