# Animations

## Animations

**Files:** `src/config/config.toml`, `src/styles/animation.css` · **Skill level:** Beginner

Taskly's motion is calm on purpose: content rises a little and fades in as it scrolls into view, the page scrolls smoothly, and small details (the FAQ plus, the pricing switch, the menus) ease into place. Visitors who ask their system for reduced motion get none of it: no scroll-in animation, no smooth scrolling, and no transitions (menus, tabs, and switches jump to their end state).

### Scroll-In Animations
```toml
[settings.animation]
  enable               = true
  respectReducedMotion = true
  easing               = "cubic-bezier(0.215, 0.61, 0.355, 1)"   # standard ease-out
  duration             = "600ms"
  distance             = "0.75rem"    # how far content rises while fading in
  rootMargin           = "0px 0px -8% 0px"
  threshold            = 0.14         # share of an element visible before it animates
```

`enable = false` shows everything at once, without motion. Keep `distance` small for a calm feel.

Developers: an element animates when it has the `data-scroll-reveal` attribute; the styles are in `src/styles/animation.css`.

### Smooth Scrolling
Powered by [Lenis](https://lenis.darkroom.engineering/):

```toml
[settings.smoothScroll]
  enable               = true
  respectReducedMotion = true
  duration             = 1.1        # higher feels slower and smoother
  easing               = "expo"     # expo | linear | easeOutQuad | easeOutCubic
  smoothWheel          = true
  syncTouch            = false
  wheelMultiplier      = 1
  touchMultiplier      = 1
  anchors              = true       # smooth scroll to #anchors
  autoRaf              = true
  stopInertiaOnNavigate = true
```

`enable = false` gives the browser's native scrolling.

### Moving Parts In Sections
- The logo strips scroll sideways. Their speed and direction are in the `marquee` block of `logos-section.md` (`duration`, `reverse`, `pauseOnHover`).
- The `marquee` testimonials scroll sideways too.
- The `stacked` features pin and pile up while the page scrolls (CSS only, no script).
- Numbers in stat cards and the product UI ("12k+", "97%", "4.9/5") count up from 0 when they scroll into view. The final number is in the HTML, so search engines and visitors without JavaScript see it. To make another number count, add a bare `data-count` attribute to the element that holds it (`<p data-count>{item.value}</p>`); the script is `src/layouts/components/global/CountUp.astro`.
- FAQ questions, the phone menu, and the "On this page" list of legal pages open and close with a height animation.

<Aside type="note">
  With `respectReducedMotion = true` (the default), visitors who turned on
  "reduce motion" in their system settings see no scroll-in animation and no
  smooth scrolling. Leave it on. For those visitors, looping animations (logo
  strips, charts) also play once and stop, and transitions finish at once,
  whatever these settings say (one rule in `src/styles/animation.css`).
</Aside>

### Do It With AI
```text
Make the site feel faster: in src/config/config.toml set [settings.animation] duration to
"400ms" and distance to "0.5rem", and turn [settings.smoothScroll] off. Don't edit CSS files.
```