How to create hexagon grid with animated counter (responsive layout)
Hi Slider Revolution Support Team,
I’m trying to recreate a visual layout in Slider Revolution that contains several hexagon-shaped blocks with numbers and text inside. The numbers should count up (animated) when the user scrolls to the section. On desktop, the hexagons are arranged in a grid with offset rows, and I’d like it to stay visually clean and aligned on mobile as well (not stacked vertically).
Here’s what I need:
- Hexagon shapes with custom colors and text inside
- Animated counter for the numeric values (e.g. 12,000 → counts up from 0)
- Text below or inside the hexagon (two lines of description)
- Offset layout (every second row shifted horizontally)
- Responsive design – ideally a horizontal scroll or consistent scaling so the hexagon grid doesn’t break on mobile
What’s the best way to build this in Slider Revolution?
- Should I use shape layers or PNG/SVG hexagons?
- How can I ensure proper spacing and offset?
- How do I enable the number count-up effect only on scroll-in-view?
Thanks in advance for your help!
Best regards,
Comments
Hi,
FYI, this is not Slider Revolution support, but Betheme support.
1) I believe the best will be using SVGs for that.
2) You must adjust the position of your elements inside the slider.
The following article should be helpful:
https://www.sliderrevolution.com/manual/absolute-and-relative-position/
3) I do not think it is possible. Instead, you can try to use the counter shortcode inside the slider.
https://muffingroup.com/betheme/elements/counter-inline/
Best regards