Dave Hall

<p>Ever wanted your site to scroll on two axes at the same time like it’s laid out on a 2D plane? It’s either a whole new way of thinking about web design, or a fun little gimmick. Have a play, see what comes out. Send me some feedback if you get the chance.</p>
<h3>Tips</h3>
<p>Scrrraps works best with the WordPress block editor. Support for Elementor is currently experimental and other page builders are not currently supported.</p>
<p>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.</p>
<p>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.</p>
<p><strong>Visit <a href="https://scrrraps.com/" rel="nofollow ugc">scrrraps.com</a> for demos and more info.</strong></p>
<h3>Feedback</h3>
<p>Scrrraps is still at an early stage of development. It’s been tested with a handful of the most popular themes, but by no means exhaustively, and I know some sites will inevitably cause a few conflicts and glitches. I’m also really interested to see some of the creative uses people are putting the plugin to, so please, if you have a moment, I’d love to hear your feedback.</p>
<p><strong>Click <a href="https://wpscraps.com/feedback" rel="nofollow ugc">here</a> to share your experiences.</strong></p>
<h3>Donations</h3>
<p>Too much money in your pocket? A heart so buzzing with gratitude it feels like it might explode? A simple solution to both these problems is available in the form of the donation link on this page, where you can give me your money and your thanks in one slick anonymous transaction. All monies are gratefully received.</p>
<p>Thanks,<br />
Dave<br />
<a href="https://web.davidwalterhall.com" rel="nofollow ugc">web.davidwalterhall.com</a></p>


Scrrraps

Scrrraps converts pages built with the block editor into engaging animated 2D "scrapbook" pages, scrolling on X and Y axes.

Freemius

Scrollsequence

Kozelsky

<p>Scrollsequence allows you to create stunning image sequence animations that are controlled with mousewheel or touch. Turn static design into cinematic experience in few clicks.</p>
<p><iframe loading="lazy" title="Scrollsequence - How it works" src="https://player.vimeo.com/video/413362050?dnt=1&app_id=122963" width="750" height="422" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write"></iframe></p>
<p>Make your website come alive, scroll through video and interactive content.  You can use it to create an eye-catching animation sequence on your homepage or in individual posts and pages to offer a more cinematic, engaging way for visitors to consume your content.</p>
<h3>Never seen before on WordPress</h3>
<p>Scroll sequence technology was exclusive to big tech companies, who have budget and skills to implement it from scratch. Sony, Apple and Samsung made use of this background animation technique, <a href="https://scrollsequence.com/how-to-make-scroll-image-animation/?utm_source=wpreporeadme&utm_medium=wpreporeadme&utm_campaign=wpreporeadme" rel="nofollow ugc">learn how they made use of scroll animations</a> and how to add this feature to your site with ease.</p>
<h3>Get Started</h3>
<ul>
<li>Have a look at some <a href="https://scrollsequence.com/examples/?utm_source=wpreporeadme&utm_medium=wpreporeadme&utm_campaign=wpreporeadme" rel="nofollow ugc">examples</a> on our website</li>
<li>Play around in <a href="https://scrollsequence.com/live-demo/wp-admin/?utm_source=wpreporeadme&utm_medium=wpreporeadme&utm_campaign=wpreporeadme" rel="nofollow ugc">live demo</a> sandbox</li>
<li>Check the <a href="https://scrollsequence.com/documentation/?utm_source=wpreporeadme&utm_medium=wpreporeadme&utm_campaign=wpreporeadme" rel="nofollow ugc">documentation</a></li>
<li>Subscribe to our <a href="https://www.youtube.com/channel/UCfS4p0R5ZYr4GTQ9DIBbEgg" rel="nofollow ugc">youtube</a> channel</li>
</ul>
<h3>Main Features</h3>
<ul>
<li><strong>Performance</strong> – Thanks to HTML5 Canvas image draw technology and lightweight scripts and HTML</li>
<li><strong>Drag and Drop</strong> – Reorder images, scenes and animations</li>
<li><strong>Animate HTML Elements</strong> – Write and animate content in sync with media</li>
<li><strong>WYSIWYG editor</strong> – Shortcode and oEmbed capability</li>
<li><strong>Compatible</strong> – Use with Gutenberg, <a href="https://scrollsequence.com/how-to-make-image-sequence-animation-in-elementor/" rel="nofollow ugc">Elementor</a>, <a href="https://scrollsequence.com/how-to-make-image-sequence-animation-in-divi/" rel="nofollow ugc">Divi</a>, Oxygen, <a href="https://scrollsequence.com/how-to-make-image-sequence-animation-in-beaver-builder/" rel="nofollow ugc">Beaver Builder</a> and many others</li>
<li><strong>SEO</strong> – All content is visible for search engines </li>
<li><strong>Fully responsive</strong> – Mobile and desktop sizing and alignment options</li>
<li><strong>Media gallery</strong> – Backend upload and select</li>
<li><strong>Image preloading</strong> – Images are pre-loaded in the background</li>
<li><strong>Custom CSS</strong> – Add your own styles </li>
<li>Image opacity and background color settings</li>
<li>Scrollsequence speed settings</li>
<li>Fallback option when user has Javascript disabled</li>
<li>Options for footer and sidebar hide/display</li>
<li>Native WordPress shortcode support</li>
</ul>
<h3>Pro Plan Feautres</h3>
<ul>
<li><strong>Advanced Content Animation</strong> – Create Fade In, Fade Out, Move and Scale animations on scroll</li>
<li><strong>Unlimited Scenes and Images</strong> </li>
<li><strong>Smooth Scroll Delay</strong> – Add a delay effect to your animation to make it smoother</li>
<li><strong>Smart Image Pre-loading</strong> – Control how many images are loaded on page load before the animation is displayed</li>
<li><strong>SEO Friendly</strong> – All content added to Scrollsequence is indexable</li>
<li><strong>Priority Support</strong></li>
</ul>
<h3>Business Plan Feautres</h3>
<ul>
<li><strong>Cloud Media Tools</strong> – A collection of handy cloud based media tools </li>
<li><strong>Video to Image Converter</strong> – Convert source video into a sequence of images in seconds</li>
<li><strong>AI Frame Former</strong>  – Increase number of image frames from your video in our cloud service for smoother animation</li>
<li><strong>WP Media Gallery Import</strong> – Import still images from your video directly to WP Media Gallery with one click</li>
</ul>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/40ayu_t7Mlc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>What others say about Scrollsequence?</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/yadOWGOpTIU?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<blockquote>
<p>” <strong>You’ve never seen anything like this in WordPress.</strong> ” – Bjorn Allpas – WP Learning Lab</p>
</blockquote>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/OO6xy095qsY?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<blockquote>
<p>” <strong>This takes interactivity to another level.</strong> ” – Imran Siddiq – Web Squadron</p>
<p>” <strong>Game Changer</strong> – Really excited for the future of this plugin as out of the gate it’s amazing. Excited for what the future holds and looking forward to widget functionality perhaps in builders like Divi.” – Luke Dempsey</p>
<p>” <strong>Best execution of scrolly telling</strong> – I’ve tried a lot of ways to create scrolly telling content…from lottie files to scroll triggers to custom gsap stuff. None comes close to what Scrollsequence can do though.” – Leon Kiongwei</p>
<p>” <strong>Great plugin</strong> – It works, it’s fluent. You just need some time to understand the logic, but it’s fairly straightforward.” – P Fabor</p>
</blockquote>


Scrollsequence – Cinematic Scroll Image Animation Plugin

Image sequence animation on scroll. Take any video, and transform it into immersive dynamic landing page that animate as you scroll.

Scrrraps vs Scrollsequence – Cinematic Scroll Image Animation Plugin