@veams/css-animations

A collection of CSS animations for VEAMS.

Table of Contents

1. Overview
2. Installation
3. Usage
   • SCSS
   • CSS
   • TypeScript/JavaScript

Overview

@veams/css-animations provides a set of animations that can be integrated into any project via SCSS, plain CSS, or TypeScript constants.

Installation

npm install @veams/css-animations

Usage

SCSS

Use the main Sass module with Sass pkg: URLs:

@use "pkg:@veams/css-animations" as *;

Or compose only the pieces you need:

@use "pkg:@veams/css-animations/scss/variables.scss" as vars;
@use "pkg:@veams/css-animations/scss/animations/feedback-effects/fb-setup.scss" as *;
@use "pkg:@veams/css-animations/scss/animations/feedback-effects/fb-border-simple.scss" as *;

:root {
  @include vars.veams-root-vars;
}

.my-element {
  @include fb-setup;
  @include fb-border-simple;
}

/* Optional: emit the keyframes from a shared stylesheet */
// @include fb-border-simple-keyframes();

This requires Sass's Node package importer to be enabled in your toolchain.

CSS

If you are not using Sass, you can import the pre-compiled CSS files:

/* All animations */
@import "@veams/css-animations/index.css";

/* Specific animation */
@import "@veams/css-animations/animations/feedback-effects/fb-border-simple.css";

TypeScript/JavaScript

Use the provided constants for type-safe animation names:

import { ANIMATIONS } from '@veams/css-animations';

const myAnimation = ANIMATIONS.FEEDBACK.BORDER_SIMPLE; // 'fb-border-simple'