Scroll Triggered Animations

ScrollMate 2 is the current version.

ScrollMate v1 is discontinued.


Your kind donations fund the running costs and keep the stacks and support free.

Thank you in advance.


ScrollMate adds smooth scroll activated animation effects to web pages.

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

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

ScrollMate is carefully implemented to have minimal effect on browser performance, even when there are lot of animated elements on the page

PLEASE NOTE: Since the advent of iOS 9, scroll triggered animations will not occur on touch devices. Your ScrollMate stacks will gracefully handle this and just appear in their normal non-animated state.


Easy To Use, Dynamic Results...

Drop a ScrollMate 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

See the Doc File For Full Instructions

Theme Compatibility
ScrollMate will work with any RapidWeaver theme. It is not Foundation specific. Non free-form themes however may restrict the animation effects to their content width. Please see the demo site for examples.

Browser Compatibility
Scroll triggered animations may not be supported in older browsers. You page will still display normally and all content will be shown statically without the scroll activated animations.

Related Articles