This page explains how the animated components in Virexon are built and how to edit them. Almost every effect uses Webflow native interactions and needs no setup. The one exception is the number counters, which rely on a single script in the home page head code, explained below.
The client logo strip on the home page scrolls continuously. The row of logos is duplicated so the loop has no visible seam. Spacing between logos is set as a right margin on the logos_logo class rather than a flex gap, which is what keeps the loop exact. To change the speed, open the Logo Marquee interaction and edit the duration on the Move step. A larger number means slower.
Each integration card has a hidden layer named Border Glow sitting inside the card border. It is a large square with a radial gradient, centred using negative margins, and the card wrapper clips it with overflow hidden. A Page Load interaction rotates that layer from 0 to 360 degrees on a loop, which makes the light travel around the card edge. The interaction targets the border-glow class, so any card you duplicate will animate automatically.
The hero buttons use the same idea with a separate class called button-glow, sized for a pill shape and hidden by default. A Mouse Hover interaction fades it in and rotates it, and a second animation on hover out fades it back and resets the rotation. The reset is required because a looping interaction does not stop on its own.
The statistics on the home page count up when they scroll into view. This is the only effect in the template that uses an external script: the Flowbase Count Up booster, loaded from jsDelivr in the home page head code. If you delete a page or copy a section into another project, copy that script tag across too, otherwise the numbers will sit at zero.
Each number is a text block carrying three custom attributes. fb-count is set to true and switches the effect on. fb-count-target holds the value you want to end on, and it accepts symbols, so 2M+, $40M+, 99.5% and 14 days all work. fb-count-time is the duration in milliseconds, set to 3000 across the template. To change a number, edit fb-count-target only. The text you type inside the block is a fallback shown before the animation runs, so keep the two the same.
To add a counter to a new element, give it the same three attributes. To remove the effect, delete the fb-count attribute and the number will simply display as static text. Seven elements use it: one in the automation section and six in the Why Choose Us stat cards.
To slow an animation down, change only the duration value on its rotate step and leave the easing on Linear. To remove an effect entirely, delete the Border Glow or button-glow layer from the element. Nothing else depends on those layers, so the card or button will simply lose the moving light and keep its static border.
Every effect above except the number counters is built with Webflow interactions, which run on Webflow's built in GSAP powered animation engine. Nothing needs to be installed for those. The only external dependency in the template is the Flowbase Count Up script described above, which sits in the home page head code.
Book a free automation audit. We'll map where your hours are going and show you exactly what's worth automating.
.svg)
.svg)
.webp)
