A robust animation library powered by GSAP for motion effects.
npm install gsapanimationbash
npm i cssanimationio
`
#### Import Everything with One Line
`bash
import 'cssanimationio';
`
This will:
- Load all core CSS animations
- Load all utility classes
- Initialize the letter animation engine
- Import all GSAP animations and make them ready to use
#### Full GSAP + CSS Import (Bundler)
`bash
import 'cssanimationio/css';
import { animationMap } from 'cssanimationio/gsap';
`
#### Individual Imports
CSS only
`bash
import 'cssanimationio/css'; // Core CSS
import 'cssanimationio/utility'; // Utility CSS
`
GSAP only
`bash
import { animationMap } from 'cssanimationio/gsap';
// or use CDN/UMD from cssanimationio/gsap/min.js
`
CSS Letter Animation
`bash
import { initLetterAnimations } from 'cssanimationio/letter';
`
$3
Include the cssanimation.css library into the :
`html
href="https://cdn.jsdelivr.net/npm/cssanimationio@latest/dist/cssanimation.min.css"
rel="stylesheet"
/>
`
$3
After installing cssanimation.css library, now add the class .cssanimation and the class of animation name like .ca__fx-FadeIn for fade in animation to an element. For list of animation class name click here.
`html
cssanimation
`
_That's it! You've got a CSS animated element. Super! π_
$3
| Prefix | Description | Example Usage |
| --------- | ------------------------------------------------ | ------------------------------- |
| ca__fx- | Visual FX animations (pure CSS) | |
| ca__u- | Utility classes (pure CSS spacing, layout, etc.) | |
| ca__lt- | Letter-based animations | |
How to Use CSS Letter Animations
Want to animate text, letter by letter?
The cssanimation.io library includes 100+ letter-based effects (.ca__lt-FadeIn, .ca__lt-ZoomIn, .ca__lt-Snake, etc.).
cssanimation.io also includes two exclusive types of letter animations: .ca__lt-sequence and .ca__lt-random, which must be added to any element you want to animate letter by letter.
What Are Sequence and Random Animations?
- .ca__lt-sequence β Letters animate one after another, in order.
- .ca__lt-random β Letters animate in a randomized order, adding playful motion.
#### Step 1. Include the Script
Youβve already installed the cssanimation.io library, so thereβs nothing else you need to do if youβre bundling it via a module system like Vite, Webpack, or using itwith a framework (React, Vue, etc.).
If youβre using plain HTML without a bundler, just add the following
#### Step 2. Add Animation classes to Your HTML
| Class | What It Does |
| ------------------ | ----------------------------------------------- |
| .cssanimation | Base class for all animations (\*required) |
| .ca__lt-FadeIn | A letter animation class (Fades in each letter) |
| .ca__lt-sequence | Animates letters in order or |
| .ca__lt-random | Animates letters in random order |
`html
cssanimation
`
`html
Surprise!
`
#### CSS Letter Animation Delay Control
You can now customize the animation delay between letters using the ca__lt-delay attribute, no need to edit JavaScript!
`html
This will animate letter-by-letter with a 200ms step
Random delay with 50ms steps
`
- ca__lt-delay sets the delay step in milliseconds for each letter span.
- Works for both .ca__lt-sequence and .ca__lt-random classes.
Browse the full list of ca__lt (letter-based) animation classes: Cheatsheet on GitHub
> This feature is exclusive to cssanimation.io β making it perfect for creative headlines, banners, parallax effect, hero sections, and expressive UI storytelling.
Modular Import
#### Only need one effect? Import it like this:
HTML
`html
`
CSS or SCSS
`CSS
@import './dist/modules/ca__LetterFadeIn.css';
`
JavaScript (Webpack/Vite/Rollup)
`js
import './dist/modules/ca__LetterFadeIn.css';
`
Import everything in one go using the index file:
`html
`
`js
import './dist/modules/ca__index.css';
`
#### Available Modules
| Module | File |
| --------------- | -------------------------------- |
| Blur In | ./dist/modules/ca__BlurIn.css |
| Blur Out | ./dist/modules/ca__BlurOut.css |
| Bounce | ./dist/modules/ca__Bounce.css |
| Door Open Close | ./dist/modules/ca__Door.css |
| Dance | ./dist/modules/ca__Dance.css |
| ...and more | See ./dist/modules/ folder |
- Each file is generated from ./dist/modules/cssanimation.css
- Follows the naming convention: ca__[AnimationName].css (PascalCase)
- ca__index.css imports all animation modules
Utility Class
cssanimation.io offers a powerful set of pre-built utility classes. Just use them along with the .cssanimation base class and your chosen animation class.
This includes:
- .ca__u-Speed*: Control speed
- .ca__u-Ease*: Easing control
- .ca__u-Loop*: Repeat settings
- .ca__u-Delay*: Add delays
Check out the full list of utility classes with details in cssanimation-utilities.md.
Combo Example
`html
class="cssanimation ca__fx-zoomIn ca__u-SpeedChill ca__u-Delay3 ca__u-EaseSnappy ca__u-LoopTriple"
>
Magical Entrance!
`
!GSAP Powered GSAP Animation Guide
cssanimation.io isnβt just about CSS β it also supports GSAP (GreenSock Animation Platform), the gold standard for JavaScript animations. With GSAP, you get even more powerful, smooth, and flexible control over your animations.
Supports animations via HTML using ca-gsap attributes, with JSON-configurable options.
Why Use the GSAP Version?
- Smoother and more performant animations.
- Fine control over timing, easing, delays, and sequencing.
- Works great with ScrollTrigger, SplitText, and other GSAP plugins.
- Ideal for creative UI/UX and motion design.
Getting Started with GSAP Version
Hereβs how to animate elements using our GSAP-powered version:
#### 1. Install via NPM
`bash
npm install cssanimationio gsap
`
Then in your JavaScript:
`js
// Import GSAP core
import { gsap } from 'gsap';
`
#### Or Include via CDN. If you're working without a bundler:
`html
`
$3
Add the GSAP animation name in the ca-gsap data atribute like:
`html
cssanimation.io GSAP
`
- ca-gsap="ca__gx-FadeIn" β selects which animation to use
- ca-gsap-options='{}' β passes GSAP options to the animation function
π Tip: Check the full list of animation class names in the cssanimation-reference.md.
$3
You can control GSAP animation parameters using a JSON string inside the ca-gsap-options attribute:
`html
ca-gsap="ca__gx-FadeIn"
ca-gsap-options='{
"from": { "opacity": 0, "y": 80, "scale": 0 },
"to": { "opacity": 1, "y": 0, "duration": 1.5, "ease": "sine.out", "scale": 1.2 }
}'
>
Custom Animated Box
You can use any valid GSAP properties, including:
| Option | Example |
| ------------------ | ---------------------- |
| x, y | "y": 50 |
| duration | "duration": 1.2 |
| delay | "delay": 0.5 |
| repeat | "repeat": -1 |
| yoyo | "yoyo": true |
| ease | "ease": "sine.inOut" |
| opacity | "opacity": 0.7 |
| rotation | "rotation": 45 |
| scaleX, scaleY | "scaleX": 1.3 |
$3
Invalid JSON:
`html
β Missing leading 0
`
Correct:
`html
βοΈ Valid
`
$3
- Always use double quotes (")
- Include leading zeros (0.5, not .5)
- No trailing commas
$3
You can apply letter-by-letter GSAP animation, by using the ca__gx-lt attribute with one of the following modes:
- sequence β animates letters from left to right
- reverse β animates letters from right to left
- random β animates letters in random order
Use it alongside the ca-gsap attribute like this:
`html
letter-by-letter GSAP animation
letter-by-letter GSAP animation
letter-by-letter GSAP animation
`
Each letter will be automatically wrapped in a and animated based on the chosen order mode.
$3
CSS vs. GSAP β Which Animation Version Should You Use?
| Feature / Capability | CSS Version | GSAP Version |
| --------------------------- | ------------------------------------ | ----------------------------------------------------- |
| π§± Technology | Pure CSS | JavaScript (GSAP) |
| β‘ Performance | Great for simple UI effects | Optimized for complex, smooth animations |
| π Control | Fine-grained control via CSS | Fine-grained control via JS (timing, easing) |
| π Animation Types | Predefined class-based animations | Class-based with dynamic GSAP tweening |
| π€ Letter Animation Support | β
Sequence & Random | β
Sequence only (random coming soon) |
| π Looping & Repeating | infinite class | Full loop control via JS (e.g. repeat, yoyo) |
| βοΈ Configuration | Minimal setup | Script includes + optional JS tweaks |
| π¨ Customization | Moderate (via utility classes) | High β control properties on the fly |
| π¦ Size | Very lightweight (no JS needed) | Heavier due to JS dependency |
| π§© Dependencies | None | Requires GSAP (TweenMax) |
| π CDN Available? | β
Yes | β
Yes |
| π NPM Ready? | β
Yes (cssanimationio) | β
Yes (cssanimationio) |
| π§ Use Case Examples | Hover states, hero sections, banners | Interactive animations, scroll triggers, custom flows |
Accessibility: Reduce Motion Support
By default, cssanimation.io respects user system preferences. When prefers-reduced-motion: reduce` is enabled, animations are automatically turned off for a better UX.