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

[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:

[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.

Do It With AI

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.