Scroll Mate
Animate on Scroll

My Image

Scroll Mate

ScrollMate is the new stack from BWD for adding simple scrolling effects to web pages.

As you scroll down the page ScrollMate can scale, rotate, translate and change the opacity of elements on the page.

Why just these properties? Because browsers can animate them quickly, keeping scrolling silky smooth.


Scroll Mate works with all RapidWeaver themes.

Please note though that many themes prevent content flying in from the edge of the screen. Instead it will animate in the themes' main content area.

Here are a couple of demonstrations in YuzoolThemes Split theme and Elixir Graphics Tesla theme:

preview.bigwhiteduck.com/scrollmate/SplitPreview/

preview.bigwhiteduck.com/scrollmate/TeslaPreview/

My Image

Usage

Drop a Scroll Mate stack on your page, drop in other stacks that you want to animate.


Set up when the animation should start, on entry or as the stack exits the page triggered by either the top or bottom edge of the stack, or when the whole stack is in view.

Fine tune the start and end of the animation as a percentage of the page height.

Choose the easing effect


My Image

Set up the animation

You can animate by any or all of the settings at once.

By combining the various transitions, many effects are possible.



My Image

Opacity

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

Scale Up

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

Scale Down

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

Move

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

Rotate

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.

Opacity, Scale and Move Y

Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella. Master cleanse Etsy trust fund, forage craft beer biodiesel Wes Anderson hashtag Intelligentsia hoodie. Ethnic DIY 8-bit, leggings ennui narwhal Tumblr Portland Helvetica asymmetrical fap twee viral 90's aesthetic. Blue Bottle kale chips hashtag, jean shorts disrupt semiotics wayfarers pop-up aesthetic retro kogi Tumblr put a bird on it.


Nesting

By putting a Scroll Mate within a Scroll Mate stack you can combine animations and control their start point, end point and duration separately



Scroll

Mate

My Image

WARNING

DO NOT OVERUSE SCROLL MATE

Scrolling effects are great when used IN MODERATION

Please do not make your sites look horrible by adding hundreds of scroll effects everywhere


This page is a demonstration of the stack and therefore has a lot of Scroll Mates on it. As you can see, it fair wazzes along.

All this scrolling does however come at a CPU cost so please do not go mad.

Older browsers may not support these scroll effects but your content will not be affected. The page will simply display as normal without the scroll animations

See the Other Examples Pages in the demo project to see how the stack settings are used



One Final Effect

Scroll Mate has a built in perspective control.

This means you can not only do all the above effects but you can do them in 3D with perspective as well.

Again, this is an option that should be used sparingly.

In the right circumstances though it can be very effective.

Check out the footer below as it appears with perspective.


My Image
My Image

If you enjoy BWD stacks and find them useful it would be great if you could contribute in some small way to the running costs. (I don't actually spend the donations on coffee!)

Thankyou