Contributors: Elliot Cooke
Author URI: https://cookehouse.net/
Version: 0.4.0
Requires at least: WordPress 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Add scroll-triggered frame-by-frame animations to your WordPress pages. Create stunning visual effects that respond to user scrolling.
Fancy Scroll Anims transforms static images into engaging scroll-triggered animations. Perfect for product showcases, storytelling, and creating immersive web experiences.
- 🎬 Frame-by-Frame Animation - Upload sequential images and create smooth scroll-based animations
- 📜 Scroll-Triggered - Animations play as users scroll down and reverse when scrolling up
- ⚙️ Configurable - Adjust easing functions and loop counts per animation
- 🎯 Simple Shortcode - Easy integration with
[fancy_scroll_anim id="123"] - 🖼️ Format Support - Works with WebP, JPG, and PNG images
- 🚀 Performance Optimized - Uses IntersectionObserver API for efficient scroll detection
- 📱 Responsive - Automatically adapts to container width
- Create a new Scroll Animation in WordPress admin
- Upload your animation frame images (numbered sequentially)
- Configure easing and loop settings
- Copy the generated shortcode
- Paste into any page or post
Frames are named like: product-1.webp, product-002.jpg, product-3.png
The animation engine automatically detects and sequences them.
- Upload the
fancy-scroll-animsfolder to/wp-content/plugins/ - Activate the plugin through the 'Plugins' menu in WordPress
- Go to Scroll Anims in the admin menu to create your first animation
- Navigate to Scroll Anims > Add New
- Enter a title for your animation
- Upload frame images (coming in v1.1)
- Configure easing function and loop count
- Publish
Copy the shortcode from the animations list and paste into your page:
[fancy_scroll_anim id="123"]
Optional Parameters:
class- Add custom CSS classes:[fancy_scroll_anim id="123" class="my-custom-class"]
Animation frames must follow this pattern:
animation-name-1.webp
animation-name-002.jpg
animation-name-3.png
Rules:
- Frame index is the number immediately before the file extension
- The number must be preceded by a
-character - Zero-padding is ignored (001, 02, 3 all work)
- Supported extensions:
.webp,.jpg,.jpeg,.png
- Drag-and-drop frame upload
- Automatic frame sequencing
- Preview player in admin
- Full scroll-based playback
- Easing function support
- Loop functionality
- Settings page
- Performance optimizations
- Enhanced documentation
- Full testing and polish
There's no hard limit, but we recommend 30-100 frames for optimal performance.
Yes! Use the Shortcode block and paste your [fancy_scroll_anim] code.
Images are stored in wp-content/scroll-anims/ outside the media library for better organization.
Yes, the animations are fully responsive and work on all devices.
- Added copy shortcode button in settings meta box with clipboard integration
- Added visual frame count badge with checkmark icon
- Added animation preview modal with play/pause controls and frame scrubber
- Added empty state message for first-time users
- Added dashicon to shortcode admin column
- Enhanced admin UX with improved visual feedback
- Performance improvements for preview functionality
- Added complete scroll animation engine with IntersectionObserver
- Implemented fractional loop count support (0.1 to 10.0)
- Added all easing functions (linear, ease-in, ease-out, ease-in-out)
- Bidirectional playback (forward/reverse with scroll)
- requestAnimationFrame optimization for performance
- Fixed meta box settings save functionality
- Frame preloading for smooth playback
- Full PHPCS code standards compliance
- Added bulk image upload with drag-and-drop support
- Implemented AJAX upload with real-time progress tracking
- File naming parser extracts frame index from filename
- Frame validation (format, size, MIME type)
- Thumbnail grid display with frame numbers and delete buttons
- Individual frame deletion functionality
- Automatic frame ordering by index
- Frame metadata storage (paths, count, dimensions)
- Moved constants to main plugin file for clarity
- Added WordPress-compatible readme.txt
- Added CHANGELOG.md for version tracking
- Improved code documentation
- Initial development release
- Custom post type for animations
- Basic admin interface
- Shortcode system foundation
- Settings (easing, loop count)
- Plugin structure and activation
Built following WordPress coding standards with modern PHP 8.0+ practices.
Project Structure:
fancy-scroll-anims/
├── fancy-scroll-anims.php # Main plugin file
├── constants.php # Plugin constants
├── includes/ # Core classes
│ ├── class-plugin.php
│ ├── class-post-type.php
│ ├── class-admin-hooks.php
│ ├── class-shortcode.php
│ └── class-frontend.php
├── assets/
│ ├── admin/ # Admin CSS/JS
│ └── public/ # Frontend CSS/JS
└── dev-notes/ # Development documentation
See dev-notes/00-project-tracker.md for full development roadmap.
For bug reports and feature requests, please use the support forum.
Created by Elliot Cooke
https://cookehouse.net/
This plugin is licensed under the GPLv2 or later.