Animation Catalog

Animation Catalog

LibAnimate includes 77 built-in animations organized into 8 categories. All animations are inspired by animate.css.

---

Attention Seekers

Attention seeker animations play in place and return the frame to its original state when complete. They do not require distance.

Animation	Duration	Description
bounce	1.0s	Bounces the frame up and down
flash	1.0s	Flashes opacity on and off
pulse	1.0s	Gently pulses the scale up and back
rubberBand	1.0s	Stretches and snaps back (scale approximation)
shakeX	1.0s	Shakes horizontally
shakeY	1.0s	Shakes vertically
headShake	1.0s	Subtle horizontal shake (like shaking head "no")
tada	1.0s	Scales up with a wiggle flourish (scale approximation)
wobble	1.0s	Wobbles side to side with scale pulses
heartBeat	1.3s	Pulses like a heartbeat

-- Attention seekers don't need distance
LibAnimate:Animate(frame, "heartBeat", { duration = 1.3 })

---

Back

Back animations use overshoot easing (easeInBack/easeOutBack) for a natural, springy feel.

Entrances

Animation	Duration	Distance	Description
backInDown	0.6s	300px	Enters from above with overshoot
backInUp	0.6s	300px	Enters from below with overshoot
backInLeft	0.6s	300px	Enters from the left with overshoot
backInRight	0.6s	300px	Enters from the right with overshoot

Exits

Animation	Duration	Distance	Description
backOutDown	0.6s	300px	Exits downward with overshoot
backOutUp	0.6s	300px	Exits upward with overshoot
backOutLeft	0.6s	300px	Exits to the left with overshoot
backOutRight	0.6s	300px	Exits to the right with overshoot

---

Bouncing

Bouncing animations feature characteristic bounce effects on arrival or departure.

Entrances

Animation	Duration	Distance	Description
bounceIn	0.75s	-	Bounces in from scale 0 (no translation)
bounceInDown	1.0s	300px	Bounces in from above
bounceInUp	1.0s	300px	Bounces in from below
bounceInLeft	1.0s	300px	Bounces in from the left
bounceInRight	1.0s	300px	Bounces in from the right

Exits

Animation	Duration	Distance	Description
bounceOut	0.75s	-	Bounces out to scale 0 (no translation)
bounceOutDown	1.0s	300px	Bounces out downward
bounceOutUp	1.0s	300px	Bounces out upward
bounceOutLeft	1.0s	300px	Bounces out to the left
bounceOutRight	1.0s	300px	Bounces out to the right

---

Fading

Simple opacity transitions, optionally combined with directional movement. "Big" variants use larger distances.

Entrances

Animation	Duration	Distance	Description
fadeIn	0.4s	-	Simple fade in
fadeInDown	0.4s	300px	Fade in from above
fadeInDownBig	0.4s	600px	Fade in from far above
fadeInUp	0.4s	300px	Fade in from below
fadeInUpBig	0.4s	600px	Fade in from far below
fadeInLeft	0.4s	300px	Fade in from the left
fadeInLeftBig	0.4s	600px	Fade in from far left
fadeInRight	0.4s	300px	Fade in from the right
fadeInRightBig	0.4s	600px	Fade in from far right
fadeInTopLeft	0.4s	300px	Fade in from top-left corner
fadeInTopRight	0.4s	300px	Fade in from top-right corner
fadeInBottomLeft	0.4s	300px	Fade in from bottom-left corner
fadeInBottomRight	0.4s	300px	Fade in from bottom-right corner

Exits

Animation	Duration	Distance	Description
fadeOut	0.4s	-	Simple fade out
fadeOutDown	0.4s	300px	Fade out downward
fadeOutDownBig	0.4s	600px	Fade out far downward
fadeOutUp	0.4s	300px	Fade out upward
fadeOutUpBig	0.4s	600px	Fade out far upward
fadeOutLeft	0.4s	300px	Fade out to the left
fadeOutLeftBig	0.4s	600px	Fade out far to the left
fadeOutRight	0.4s	300px	Fade out to the right
fadeOutRightBig	0.4s	600px	Fade out far to the right
fadeOutTopLeft	0.4s	300px	Fade out to top-left corner
fadeOutTopRight	0.4s	300px	Fade out to top-right corner
fadeOutBottomLeft	0.4s	300px	Fade out to bottom-left corner
fadeOutBottomRight	0.4s	300px	Fade out to bottom-right corner

---

Sliding

Pure translation animations without opacity changes.

Entrances

Animation	Duration	Distance	Description
slideInDown	0.4s	300px	Slides in from above
slideInUp	0.4s	300px	Slides in from below
slideInLeft	0.4s	300px	Slides in from the left
slideInRight	0.4s	300px	Slides in from the right

Exits

Animation	Duration	Distance	Description
slideOutDown	0.4s	300px	Slides out downward
slideOutUp	0.4s	300px	Slides out upward
slideOutLeft	0.4s	300px	Slides out to the left
slideOutRight	0.4s	300px	Slides out to the right

---

Zooming

Scale-based animations, optionally combined with directional movement.

Entrances

Animation	Duration	Distance	Description
zoomIn	0.4s	-	Zooms in from scale 0
zoomInDown	0.6s	300px	Zooms in from above
zoomInUp	0.6s	300px	Zooms in from below
zoomInLeft	0.6s	300px	Zooms in from the left
zoomInRight	0.6s	300px	Zooms in from the right

Exits

Animation	Duration	Distance	Description
zoomOut	0.4s	-	Zooms out to scale 0
zoomOutDown	0.6s	300px	Zooms out downward
zoomOutUp	0.6s	300px	Zooms out upward
zoomOutLeft	0.6s	300px	Zooms out to the left
zoomOutRight	0.6s	300px	Zooms out to the right

---

Specials

Unique animations that don't fit neatly into other categories.

Animation	Type	Duration	Description
jackInTheBox	Entrance	0.6s	Pops up with a scale bounce (like a jack-in-the-box)

---

Utility

Smooth repositioning animations. These move a frame by distance pixels in a direction.

Animation	Duration	Distance	Description
moveUp	0.3s	300px	Smoothly moves up
moveDown	0.3s	300px	Smoothly moves down
moveLeft	0.3s	300px	Smoothly moves left
moveRight	0.3s	300px	Smoothly moves right

---

Animation Counts by Category

Category	Entrances	Exits	Attention	Total
Attention Seekers	-	-	10	10
Back	4	4	-	8
Bouncing	5	5	-	10
Fading	13	13	-	26
Sliding	4	4	-	8
Zooming	5	5	-	10
Specials	1	-	-	1
Utility	-	-	-	4
Total	32	31	10	77

---

Listing Animations Programmatically

local LibAnimate = LibStub("LibAnimate")

-- All animations
local all = LibAnimate:GetAnimationNames()

-- By type
local entrances = LibAnimate:GetEntranceAnimations()
local exits = LibAnimate:GetExitAnimations()
local attention = LibAnimate:GetAttentionAnimations()

-- Get details about a specific animation
local info = LibAnimate:GetAnimationInfo("fadeInUp")
print(info.type, info.defaultDuration, #info.keyframes)