Animation Not Playing or Not Working – ZenBlocks buttonBasic
Summary
When animations are not working, the cause is one of the following: **required element not configured, wrong animation type selected, or checking in the editor instead of the frontend**. Since each animation type has different trigger conditions, start by identifying the type.
—
Cause
- **Required element not configured**: Icon Animation requires an icon to be set; Frame Animation requires an icon frame to be enabled
- **Checking in the editor**: Hover-based animations must be checked on the frontend, not in the editor
- **Animation preset set to `none`**: If the Preset is left at `none`, no animation will play
Solution Steps
- Confirm which animation you configured (Text / Icon / Frame / Button)
- Open the corresponding animation settings panel
- Verify the Preset is not set to `none`
- **Text Animation**: Verify that main text has been entered
- **Icon Animation**: Verify that an icon is selected in Icon Settings
- **Frame Animation**: Verify that the frame is enabled in Icon Settings > Frame
- **Button Animation**: No specific prerequisites
- Open the actual frontend page, not the editor preview
- For hover-based animations (Text / Icon / Button), verify they trigger on mouseover
- For continuous animations (Frame), verify playback starts immediately after page load
- Open the Transition panel for each animation
- Verify that Duration is not too short (if too short, the animation is not visible)
- Verify that Delay is not too long (this is the wait time before the animation starts after hover)
Common Pitfalls
– **Text Animation 30-character limit**: Text Animation only applies per-character delays to the first 30 characters. Characters beyond the 30th will animate all at once.
– **Frame Animation overflow**: `neon-01` / `glow-01` use `box-shadow`, so `overflow: visible` is automatically applied to the frame element. Effects may extend beyond the button area.
– **Icon Animation exclusive control**: When Icon Animation is enabled, the icon’s show/hide behavior is managed by the animation system.—