Animation Designer

Download SKILL.mdGet Murage How skills work

Open source. macOS, Windows and Linux.

At a glance

What it is

Web animation expertise covering CSS animations and transitions, Web Animations API, Framer Motion, GSAP, scroll-driven animations, layout animations, spring physics, reduce-motion preferences, and performance budgets.

A skill is a written procedure a bot loads when a job calls for it. This one is a single file, SKILL.md, and the whole file is on this page.

File: SKILL.md
Length: 487 lines1,787 words, about 9 min read
Category: Web developmentHTML and CSS
Level: Intermediate
License: Apache-2.0

More web development skills.

The full skill.

The whole file, exactly as it downloads. Read it before you rely on it.

SKILL.md

487 lines · 1,787 words

Download

Animation Designer

Purpose

Design and implement performant, purposeful web animations that enhance user experience without sacrificing performance or accessibility. This skill covers animation tools, patterns, and the decision framework for choosing the right approach.

Animation Tool Selection

Decision Matrix

ANIMATION NEED                          RECOMMENDED TOOL
--------------------------------------------------------------
Simple hover/focus effects              CSS transitions
Keyframe sequences (loading, etc.)      CSS @keyframes
Entrance/exit component animations      Framer Motion (React)
                                        Vue <Transition> (Vue)
Scroll-triggered reveals                CSS scroll-driven animations
                                        (or Intersection Observer)
Complex timeline sequences              GSAP
SVG path animations                     GSAP or CSS
Spring/physics-based motion             Framer Motion (spring)
Layout animations (position/size)       Framer Motion (layoutId)
Gesture-driven (drag, pinch)            Framer Motion (drag)
Shared element transitions              View Transitions API
Data visualization animations           D3 transitions or GSAP
Micro-interactions (icons, toggles)     CSS or Lottie

Put this skill to work.

Questions.

What is the Animation Designer skill?

How much does it cost?

Nothing. It ships with Murage, which is open source. Your bots run on the AI plan you already have.

Can I change it?

Yes. Open it in Settings → Skills to read, edit or duplicate it. Skill Guard scans it again after every edit.

Give your first job to Murage.

Download the app, connect the AI you already pay for, and tell your Chief of Staff what needs doing. Plan on about ten minutes from install to a working team.

Download Murage

No account needed · Runs on the AI plan you already pay for

ANIMATION NEED RECOMMENDED TOOL -------------------------------------------------------------- Simple hover/focus effects CSS transitions Keyframe sequences (loading, etc.) CSS @keyframes Entrance/exit component animations Framer Motion (React) Vue <Transition> (Vue) Scroll-triggered reveals CSS scroll-driven animations (or Intersection Observer) Complex timeline sequences GSAP SVG path animations GSAP or CSS Spring/physics-based motion Framer Motion (spring) Layout animations (position/size) Framer Motion (layoutId) Gesture-driven (drag, pinch) Framer Motion (drag) Shared element transitions View Transitions API Data visualization animations D3 transitions or GSAP Micro-interactions (icons, toggles) CSS or Lottie

Animation Designer

More web development skills.

The full skill.

Animation Designer

Purpose

Animation Tool Selection

Decision Matrix

Put this skill to work.

Questions.

Give your first job to Murage.

Search murage.ai

Animation Designer

More web development skills.

The full skill.

Animation Designer

Purpose

Animation Tool Selection

Decision Matrix

Put this skill to work.

Questions.

Give your first job to Murage.

Create a bot and use this skill.

Ask Ember to create the bot

Open the bot’s skills

Find Animation Designer and switch it on

Ask the bot for the job

About this skill.

CSS Transitions

Fundamentals

Common Transition Patterns

CSS @keyframes

CSS Scroll-Driven Animations

Framer Motion (React)

Basic Patterns

Spring Physics

Layout Animations

Gesture Animations

GSAP (Complex Timelines)

Reduce Motion Preferences

Implementation

Performance Budget for Animation

Animation Design Principles

Animation Architecture Checklist

When to Use

Output Format

Example

Edge Cases