Animation Presets

This folder contains a collection of lightweight animation presets and examples intended to be used in web projects, motion design templates, or as a starting point for building UI animations. The presets are small, focused snippets (CSS and/or JavaScript) that you can drop into your pages to quickly add polish and motion.

Live demo

View the demo

Location: AnimationPresets/

Contents

• readme.md — this file.
• (Other files) — animation presets, demo HTML/CSS/JS files. Use these as examples or copy the code into your project.

Purpose

Animation presets make it faster to prototype interactions and bring interfaces to life. Rather than writing animations from scratch each time, pick a preset that matches the motion you want (entrance, hover, emphasis, transitions) and adapt it.

These presets are designed to be:

• Small and dependency-free (vanilla CSS/JS where possible)
• Easy to drop into existing projects
• Easy to customize (durations, delays, easing)

How to use

1. Browse the preset file you want to use inside the AnimationPresets folder.
2. For CSS-only presets: copy the CSS class and paste it into your stylesheet, then add the class to the HTML element.
3. For JS-enabled presets: include the script (or copy the function) and call it when you need the animation (on load, on hover, on click, etc.).

Example: simple fade-in (CSS)

1. Add CSS:

   .fade-in { opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 320ms ease; } .fade-in.active { opacity: 1; transform: translateY(0); }

2. HTML:

Hello

3. JS to trigger on load:

<script> window.addEventListener('load', ()=> document.getElementById('myEl').classList.add('active')) </script>

Common presets (suggested)

• Entrance: fade-in, slide-up, slide-left/right
• Attention: pulse, bounce, jiggle
• Hover: lift, scale, subtle-tilt
• Transition helpers: cross-fade, collapse/expand

If these aren't already present as files, consider adding them as separate .css or .html demo files.

Customization tips

• Easing: swap ease for cubic-bezier(...) for advanced motion.
• Duration: keep UI micro-interactions short (120–350ms) and larger transitions a little longer (400–800ms).
• Motion reduction: respect prefers-reduced-motion to disable or simplify animations for accessibility.

Example: Respect reduced motion

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .slide-up {
    transition: none;
    transform: none;
  }
}

Accessibility

• Avoid long, looping animations that distract users.
• Provide an option to disable motion in settings, and respect prefers-reduced-motion by default.

Contribution

Contributions are welcome. A few guidelines:

1. Add each preset as a small, focused file and include a demo HTML or comments explaining usage.
2. Keep dependencies minimal. Prefer CSS and vanilla JS.
3. Add tests or a simple demo page where possible so others can preview the animation.
4. Document the preset (name, purpose, parameters like duration/easing).

Suggestions / Next steps

• Add an index.html in this folder that lists and previews all presets.
• Group presets into entrance/, attention/, hover/, and transitions/ subfolders.
• Provide a tiny build script to bundle and minify CSS if you plan to publish these presets as a package.

---

If you'd like, I can:

• Generate a live index.html gallery that previews each preset.
• Create a small set of starter presets (fade, slide, pulse) as files inside this folder.
• Add a CONTRIBUTING.md with contribution checklist and PR template.

Tell me which of these you'd like and I will add them next.