Skip to content
Cosmic Themes

Animations

All of the paid themes come integrated with custom scroll-based animations. They are designed to be easily customizable and can be easily disabled, or modified with a number of pre-defined options.

The script is largely based off of the AOS library, but it has been modified to use AnimeJS for the animations. This allows for a lot more flexibility and control over the animations, and allows it to work with Astro View Transitions.

Global Enable / Disable

The animations can be globally enabled or disabled with the “useAnimations” flag in the siteData.json.ts file. This is a simple boolean that can be set to true or false.

Configuring Individual Element Animations

Any element on the site can be configured to have an animation. This is done by adding a few data attributes to the element. Here is an example of a simple fade-in animation:

<p data-aos="fade-in" data-aos-duration="1" data-aos-delay="0.5">
  This will fade in after 0.5 seconds for a duration of 1 second
</p>

Supported Data Attributes

  • data-aos = animation name. Currently supports:
    • Fades: fade-up, fade-down, fade-left, fade-right, fade-in, fade-up-right, fade-up-left, fade-down-right, fade-down-left
    • Flips: flip-up, flip-down, flip-left, flip-right
    • Slides: slide-up, slide-down, slide-left, slide-right
    • Zooms: zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right
  • data-aos-delay = delay to wait to start animation after triggered (seconds)
  • data-aos-duration = duration of animation (seconds)
  • data-aos-distance = distance for animation travel (pixels)
  • data-aos-trigger = selector of element to trigger animation on, if not the element itself (usually an id like “#hero1”)
  • data-aos-once = if you have options.once set to false, then this will make an individual element animation only happen once (“true” or “false”)
  • data-aos-mirror = this will make an individual element animate when scrolling up as well as down (“true” or “false”). Requires options.once set to false

Global Animation Options

Global options can be set in the BaseLayout.astro file. These include things like the duration of the animation, the delay, and whether or not the animation should only happen once.

Example:

src/layouts/BaseLayout.astro
// default duration of 1 second
// animations will repeat every time element is scrolled down to
// the travel distance is 50 pixels
AOS.init({ duration: 1, once: false, distance: 50 });

Available Options

These are the available options that you may wish to change:

/**
 * Default options, can be overwritten in the init method
 */
let options: AOSDefaultOptions = {
  offset: 100, // pixels of offet for triggering (from bottom of viewport)
  delay: 0, // delay before animation executes once triggered
  duration: 0.8, // seconds the animation lasts
  distance: 20, // distance the animation should travel (pixels)
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate when scrolling up as well as down
  easing: "easeOutCubic", // easing function, see https://animejs.com/documentation/#linearEasing for other easing options
  anchorPlacement: "top-bottom",
  startEvent: "DOMContentLoaded", // if you need a different start event from DOMContentLoaded. Recommend not changing this
  disableMutationObserver: true,
  throttleDelay: 99,
  debounceDelay: 50,
};