Auto-Animation is a feature that automatically animates matching elements between consecutive slides marked with the data-auto-animate attribute. It uses the FLIP (First, Last, Invert, Play) animation technique to create smooth transitions for position, size, and CSS properties. The feature is implemented by the AutoAnimate controller which generates dynamic CSS transitions at runtime.
For information about slide transitions themselves, see Transitions and Effects. For fragment animations within a single slide, see Fragments.
The auto-animation system identifies matching elements between two consecutive slides and animates their transformation. When navigating from a "from" slide to a "to" slide, the system:
This creates the illusion that elements are smoothly morphing between slides.
Sources: js/controllers/autoanimate.js1-627
To enable auto-animation between slides, add the data-auto-animate attribute to both slides:
Elements with matching characteristics will automatically animate. The <h1> element above will maintain its position while the new <p> element fades in.
Use data-auto-animate-id to create distinct animation groups:
Use data-auto-animate-restart on the physically latter slide to prevent animation:
Sources: js/controllers/autoanimate.js40-42 js/controllers/autoanimate.js50-54
The system uses multiple strategies to identify which elements should animate together between slides.
Diagram: Auto-Animation Element Matching Flow
The getAutoAnimatePairs function matches elements in this order:
data-id: Elements with matching data-id attributesnodeName + textContentnodeName + srcnodeName + textContent| Strategy | Selector | Serialization Key | Use Case |
|---|---|---|---|
| Explicit | [data-id] | nodeName + data-id | Manual control over matching |
| Text | h1, h2, h3, h4, h5, h6, p, li | nodeName + textContent.trim() | Headings and paragraphs |
| Media | img, video, iframe | nodeName + (src || data-src) | Images and embedded content |
| Code | pre | nodeName + textContent.trim() | Code blocks |
Sources: js/controllers/autoanimate.js443-508 js/controllers/autoanimate.js447-469
You can provide a custom matcher function via the autoAnimateMatcher configuration option:
Sources: js/controllers/autoanimate.js421-423
Auto-animation uses the FLIP technique to create performant animations by manipulating CSS transforms.
Diagram: FLIP Animation Sequence
The system calculates the transform needed to make the "to" element appear in the "from" element's position:
deltaX = (fromX - toX) / presentationScale
deltaY = (fromY - toY) / presentationScale
scaleX = fromWidth / toWidth
scaleY = fromHeight / toHeight
The transform is applied as:
Then a CSS transition animates the element back to transform: none.
Sources: js/controllers/autoanimate.js192-227 js/controllers/autoanimate.js196-207
Configure auto-animation behavior globally via Reveal.initialize():
| Option | Type | Default | Description |
|---|---|---|---|
autoAnimateEasing | string | - | CSS easing function (e.g., 'ease', 'ease-in-out') |
autoAnimateDuration | number | - | Animation duration in seconds |
autoAnimateUnmatched | boolean | true | Whether to fade unmatched elements |
autoAnimateMatcher | function | getAutoAnimatePairs | Custom element matching function |
autoAnimateStyles | array | - | CSS properties to animate |
Sources: js/controllers/autoanimate.js295-299 js/controllers/autoanimate.js375-402
Override settings on individual elements using data attributes:
| Attribute | Value | Description |
|---|---|---|
data-auto-animate-easing | CSS easing | Easing function for this element |
data-auto-animate-duration | number | Duration in seconds |
data-auto-animate-delay | number | Delay in seconds before animation starts |
Options are inherited from parent elements and merged with slide-level options.
Sources: js/controllers/autoanimate.js293-325 js/controllers/autoanimate.js311-321
By default, position and size are animated. Control what gets animated using the element options:
translate: false - Disable position animationscale: false - Disable size animationstyles: ['property1', 'property2'] - Specify CSS properties to animateSources: js/controllers/autoanimate.js341-370 js/controllers/autoanimate.js192-227
Elements that exist in the "to" slide but have no match in the "from" slide are considered "unmatched". When autoAnimateUnmatched is enabled, these elements fade in.
Diagram: Unmatched Element Detection
Unmatched elements use default timings:
This creates a staggered effect where matched elements animate first, then unmatched elements fade in.
Disable on a specific slide:
Sources: js/controllers/autoanimate.js70-95 js/controllers/autoanimate.js604-625
Code blocks receive special treatment to support line-by-line animations when using syntax highlighting.
For <pre> elements, scaling is disabled by default and width/height are animated instead:
When code blocks contain highlighted lines (.hljs .hljs-ln-code) and line numbers (.hljs .hljs-ln-numbers), individual lines are matched and animated:
Diagram: Code Block Line Matching
Line matching uses:
.hljs .hljs-ln-code): Matched by textContent.hljs .hljs-ln-numbers[data-line-number]): Matched by data-line-number attributeBoth use a custom measurement function (getLocalBoundingBox) for accurate positioning relative to the presentation scale.
Sources: js/controllers/autoanimate.js478-501 js/controllers/autoanimate.js517-528
Diagram: AutoAnimate Class Structure
| Method | Purpose | Returns |
|---|---|---|
run(fromSlide, toSlide) | Main entry point, orchestrates animation between slides | void |
reset() | Cleans up animation state and removes stylesheet | void |
autoAnimateElements(from, to, ...) | Creates FLIP animation CSS for an element pair | string (CSS) |
getAutoAnimatePairs(fromSlide, toSlide) | Default element matching strategy | Array of pairs |
getAutoAnimatableElements(fromSlide, toSlide) | Filters and validates matched pairs | Array of pairs |
findAutoAnimateMatches(...) | Generic matching function using a serializer | void (modifies pairs array) |
getAutoAnimateOptions(element, inherited) | Retrieves animation options with inheritance | Object |
getAutoAnimatableProperties(direction, element, options) | Extracts position, size, and CSS properties | Object |
getUnmatchedAutoAnimateElements(rootElement) | Identifies elements without matches | Array of elements |
Sources: js/controllers/autoanimate.js11-627
Diagram: Auto-Animation State Machine
Sources: js/controllers/autoanimate.js25-123
The autoAnimateElements method generates CSS in this format:
The stylesheet is injected into the document head and removed after the animation completes.
Sources: js/controllers/autoanimate.js250-282 js/controllers/autoanimate.js100-110
Elements with the .fragment class have their opacity animation disabled to avoid conflicts with fragment animations:
Sources: js/controllers/autoanimate.js181-187
The AutoAnimate controller dispatches an autoanimate event after setting up the animation:
Sources: js/controllers/autoanimate.js112-119
Sources: js/controllers/autoanimate.js98-100 js/controllers/autoanimate.js204-207 js/controllers/autoanimate.js59-67
Refresh this wiki