Beaf
BEAF is a powerful before-and-after image comparison plugin for Framer that lets users showcase visual changes with an interactive slider. Perfect for highlighting transformations, upgrades, and results in a sleek, no-code experience.
Beaf Plugin User Guide
Beaf Framer plugin to manage before/after sliders Image inside Framer.
What You Can Do
- Create and manage before/after slider items.
- Preview slider behavior in the Framer canvas.
- Update existing sliders without rebuilding them from scratch.
- Keep slider content organized for easier iteration.
How To Use The Plugin
1. Open the Beaf plugin in Framer.
2. Add a new slider entry or select an existing one.
3. Configure the before and after content.
4. Insert or update the slider on the canvas.
5. Review the preview and make adjustments as needed.
Recommended Workflow
- Start by preparing the images or content you want to compare.
- Create the slider entry first, then place it on the canvas.
- Check the preview after each major change.
- Reuse existing slider entries when you only need small updates.
Tips
- Use clear names for slider items so they are easy to find later.
- Keep before and after assets aligned for the best comparison effect.
- Refresh the canvas preview after making content changes.
If Something Looks Wrong
- Confirm the slider entry was saved before inserting it again.
- Check that the before and after content are both assigned.
- If the preview does not update, reopen the plugin and verify the slider state.
Changelog
Update Changelog - May 7, 2026
Added full light theme support to the plugin interface. Updated SVG icons and UI elements to automatically adapt between dark and light modes for improved visibility and consistency.
Details
Framefic
