Meet Scrrraps
A WordPress plugin to transform your site’s boring linear pages into eye-catching, animated 2D scrapbooks.
A flexible design tool
Scrrraps lays out your pages and animates the motion between them. The rest is up to you. Scrrraps can work with minimalist modern designs, or textured skeuomorphic ones like this homepage.
For more inspiration, check out the Demos section in the drop-down menu.
How does it work?
1
You simply build your page as usual in the WordPress block editor.
2
Scrrraps uses Masonry to lay out the top level groups, rows, columns and containers on the selected page into blocks which typically take up about a screen.
3
The user then scrolls through the site and the browser animates the “camera position” from one section to the next.
Scrrraps is for storytellers
Scrrraps comes into its own when you want your user to slow down and read every word. It’s great for a marketing landing page, an About Us page that tells your company’s story right from to the beginning, or a showcase of a new product or creative side project.
Check out some of the demos available on this site:
Scrrraps Facts
Theme independent
The plan is to make Scrrraps work with any theme. This may take a while. To begin with it’s been tested with a dozen or so of the most popular themes in the WordPress ecosystem.
It’s been designed to work on pages built with the WordPress block editor (Gutenberg), but full support for Elementor is around the corner, and other page builders may follow.
Use a fixed or static site header
The animation will position the next page section at the top of the screen or just below your fixed header.
Responsive
Scrrraps only runs the desktop and tablet versions of your site. Mobile users will be able to scroll the same content vertically without the transition animations.
Navigate with anchor links
Create a one-page site with a navigation that takes the user directly to specific page sections, or do the same across multiple pages.
Still in beta
Scrrraps is still being tested. You can help development by leaving feedback here.
A few tips
Choose your editor
Scrrraps works best with the WordPress block editor. Support for Elementor is currently experimental and other page builders are not currently supported.
Break up your page
Your page will be broken up into sections based on the top level page elements, so it’s recommended you nest items such as headers, paragraphs and images within groups, grids, columns or rows to keep them together on one screen. You can leave a single paragraph or heading by itself, but be aware this will be given an entire screen in the Scrrraps layout, so it’s best to use this only occasionally for emphasis or effect.
Dark and light mode
Set dark mode if your background colour is dark and your text is light. Inactive “scraps” will be darker rather than lighter, and the vignette, if selected, will be darker.
Leave a review
If you’ve tried Scrrraps and enjoyed it, please leave a review on the WordPress plugin directory. It’s appreciated and will help more people discover this plugin.
Share this
Donate
Studies have shown that people who donate to the creators of WordPress plugins live longer than their peers. Across their lifetimes, they have more sexual partners and fewer dental cavities. They are better at predicting the weather and less likely to receive parking tickets. Generally, their style and good nature is respected and talked about and they are more confident in both formal and casual social situations. While many correlations have been established between donating to plugins and positive lifestyle outcomes, the precise mechanism is unknown, and the direction of causality is hard to establish.
It is unclear therefore whether clicking the button below will bring you any personal benefits. It will however help me continue to make changes and improvements to the plugin, and I will be immensely grateful.