Drop an animated scroll indicator anywhere in the block editor. Choose from five icon styles, pick a size, set a color, and let CSS handle the rest — no JavaScript animation libraries required.
How It Works
The block renders an inline SVG icon sized via a --scroll-indicator-size CSS custom property. Color is inherited from WordPress’s core text color support — no inline styles, no hardcoded values.
Animation is handled entirely in CSS. The view.js file is vanilla JavaScript that handles click-to-scroll and the optional hide-after-scrolling behavior. It loads only when the block is present on the page.
Editor controls you already know.
Native controls
Text color, spacing, typography, and alignment come from core block supports, not a parallel settings panel.
Positioning
Fixed to the screen, or dragged into place with absolute positioning for hero-style sections.
CSS-only motion
Animation is CSS and respects prefers-reduced-motion. No animation libraries.
Click to scroll
A real button element. Click or keyboard-activate it to move down the page; it hides itself once scrolling starts.
Five icon styles
Mouse, arrow, chevron, dots, and hand, at preset sizes or any custom CSS size value.
Works without JS
The icon and label still render with JavaScript off. Script only powers click-to-scroll and hide-on-scroll.
Four steps, no configuration.
- Install from the Plugins screen, or upload the folder to
/wp-content/plugins/. - Activate it.
- Open the block editor and add the Scroll Indicator block.
- Choose an icon style, size, color, and optional label.
Before you ask.
Does it need a JavaScript animation library?
No. Animations are CSS. The front-end script only powers click-to-scroll and automatic hide-on-scroll.
Can I change the icon color?
Yes. The block uses core text color support, so color comes from the normal block controls and your theme palette.
Does it respect reduced-motion preferences?
Yes. Animated effects only run when the visitor has not requested reduced motion.
What happens with JavaScript off?
The icon and optional text still render. Only click-to-scroll and hide-on-scroll require JavaScript.