Playback Controls

Preview your animations in real-time with ASCII Motion's playback controls. The system is optimized for smooth 60 FPS rendering even with complex animations.

Playback Panel

The playback controls are located in the toolbar and provide:

Play/Pause button
Frame rate display
Loop toggle
Current frame indicator

Basic Controls

Play/Pause

Press Space to start playback

Press Space again to pause

Animation pauses on the current visible frame

Keyboard Shortcuts

Shortcut	Action
Space	Play/Pause toggle
Left Arrow	Previous frame (when paused)
Right Arrow	Next frame (when paused)
Home	Jump to first frame
End	Jump to last frame

Frame Rate

Setting Frame Rate

The frame rate determines playback speed:

Default: 12 FPS
Range: 1-60 FPS
Adjustable in the animation settings panel

Common Frame Rates

FPS	Description	Use Case
1-4	Very slow	Dramatic reveals, slideshows
5-10	Standard	Most ASCII animations
12-15	Smooth	Character animation
24-30	Cinematic	Professional animation
60	Ultra smooth	Fast action, transitions

Info

Frame rate affects both preview playback and exported videos. Set it before exporting to get the timing you want.

Loop Settings

Loop Toggle

Enable or disable animation looping:

Loop On - Animation repeats continuously from the beginning after reaching the last frame
Loop Off - Animation plays once and stops on the last frame

Use looping for:

Background animations
Loading indicators
Ambient effects
Any animation meant to repeat

Performance

Info

ASCII Motion is optimized to maintain 60 FPS playback even with 30+ frames and complex cell data.

Performance Features

Hardware-accelerated rendering via Canvas API
Intelligent frame caching for instant switching
Optimized redraw - only changed cells update
Background processing doesn't block playback

Handling Complex Animations

For animations with many frames:

Keep total frame count under 100 for best performance
Use reasonable canvas sizes (under 200x100 cells)
Close other browser tabs if needed
Modern browsers perform best (Chrome, Firefox, Edge)

Integration with Other Features

Onion Skinning

Automatically disables during playback
Re-enables when you pause
No manual toggling needed

Auto-Save

Project auto-saves even during playback
No data loss if browser closes
Playback state is preserved

Export Preview

What you see during playback matches:

Video exports (WebM/MP4)
GIF exports
HTML animation exports

Workflow Tips

Quick Preview Workflow

Make changes to your frame

Press Space to preview

Watch the animation flow

Press Space to pause

Use arrow keys to step through frames

Continue editing as needed

Testing Loop Points

For seamless loops:

Navigate to the first frame
Press Space to play
Watch the transition from last → first frame
If jarring, adjust the last or first frame
Repeat until smooth

Frame-by-Frame Review

For detailed review:

Pause playback
Use Right Arrow to step forward one frame
Use Left Arrow to step backward
Examine each frame individually
Note frames that need adjustment

Troubleshooting

Playback Issues

Warning

If playback is choppy, try reducing the canvas size or frame count, or close other browser tabs.

Issue	Solution
Choppy playback	Reduce frame count or canvas size
Stuttering	Close other browser tabs
Wrong speed	Check frame rate setting
Frames skipping	Ensure frame durations are set

Timing Issues

If animation timing feels off:

Check individual frame durations
Verify frame rate matches your intent
Consider if variable frame timing is needed
Test at different frame rates