Animations & Motion

Files: src/config/config.toml, section content files · Skill level: Beginner

Consultiz uses heading reveals, scroll reveals, count-up numbers, sliders, smooth scrolling, and a cursor follower. Visitors who ask their device for reduced motion get the content without these effects: headings and sections appear at once, numbers show their final value, most sliders don’t play on their own, and the cursor follower is off.

Heading Reveal

Headings animate as they scroll into view:

[settings.headingAnimation]
  enable   = true
  style    = "chars"   # "chars" (letters slide in) | "words" (word by word) | "fade" (whole heading)
  duration = 0.8       # seconds per word or heading ("words" and "fade")
  stagger  = 0.06      # seconds between words ("words" only)
  selector = "main h1, main h2, footer h2"
  exclude  = ".no-heading-animation, .section-title-creative, .error-code"

selector is the CSS selector of the headings to animate. Add main h3 to include smaller headings.
To skip one heading, give it (or a parent) the no-heading-animation class in the component.
Set enable = false to show every heading without animation.

Count-Up Numbers

Statistics such as “98%”, “$2.4M”, or “250+” count up from zero when they appear:

[settings.animatedNumbers]
  enable   = true
  duration = 1.6   # seconds

Smooth Scrolling

[settings.smoothScroll]
  enable               = true
  respectReducedMotion = true
  duration             = 1.1    # higher feels slower and smoother
  wheelMultiplier      = 1      # mouse wheel speed
  keyboardShortcuts    = true   # macOS: Command + Arrow; Windows: Ctrl + Home / End
  keyboardDuration     = 0.9

Smooth scrolling is powered by Lenis. Set enable = false for the browser’s normal scrolling. Keep respectReducedMotion = true.

Cursor Follower

A circle follows the mouse on large screens and grows over links:

[settings.cursor]
  enable      = true
  size        = 20     # px
  hoverSize   = 70     # px over links and buttons
  opacity     = 0.5
  borderWidth = 2
  followRatio = 0.15   # lower trails further behind

It is off on touch screens, small screens, and for visitors who prefer reduced motion. Set enable = false to turn it off everywhere.

Sliders

Banners, testimonials, article lists, and speaker lists are sliders. Their timing is set in each section’s content file, for example autoplayDelay (milliseconds between slides) in src/content/sections/english/banner-slider.md. The banner, testimonial, team, and process sliders pause while a visitor uses the keyboard inside them and don’t autoplay with reduced motion on. The homepage banner also has a pause button.

Scroll Reveals

Sections and cards fade and slide in as they scroll into view. These effects are built into the section components and need no settings. They are skipped when the visitor prefers reduced motion.

Button Hover Effects

Each button’s hover animation is set in its content file with hoverEffect. See Buttons.