# Animations & Motion ## 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: ```toml [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: ```toml [settings.animatedNumbers] enable = true duration = 1.6 # seconds ``` ### Smooth Scrolling ```toml [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](https://lenis.darkroom.engineering/). 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: ```toml [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](/consultiz/customization/buttons/).