ScrollMate2
WHATS NEW
Major Features
More
A major re-write.
ScrollMate 2 has had a huge makeover of its code to enable the use of percentage units whiile keeping the performace just as good as before.
There is actually much less code written to the page than with version 1 despite all these improvements. You can read why ScrollMate 2 is so efficient in this faq article
Hide "only once" content.
If you select the "Only Once" animation feature you can now specify that the ScrollMate 2 contents are hidden once they have left the screen.
Only once has always been a great way to keep your pages from getting too busy. Now you can hide things that are once only floating effects. The "info bubbles" on the home page of this site are an example of it in practice.
Great for overlays
The allow click throughs feature has made its way over to ScrollMate 2 from Sections Box.
This means that if you are fading in an overlay as something scrolls, links and buttons will still remain "clickable". Essentially, this feature makes the ScrollMate stack and its contents "transparent" to mouse clicks.
No animations on touch devices.
There are now 2 versions of this checkbox. Once that only affects the current stack and one with a blue background that will affect ALL ScrollMate 2's on the page.
Backgrounds and overlays.
You can now use the Background and Overlay child stacks with ScrollMate 2. This is great for making overlays that fade in as you scroll just like the one on the home page header of this site. Use it along with the Float feature for maximum flexibility.
Proportional Controls
The single most requested feature from ScrollMate version 1 was to be able to specify movements in percentages as well as pixels. This was not easy to achieve whilst retaining the other unique features but in version 2 it is finally here.
What's more, as well as percentages, ScrollMate 2 allows animations to be proportional to the height or the width of the browse. This makes a huge difference to the ease with which you can construct responsive animations.
In Use
The browser width units are particularly useful but may need a little clarification.
They refer to a percentage of the browser width so, 50 vw is 50% of the current browser width. If you want to move something the full width of the browser then it will need a Move setting of 100.
Percentages, by contrast, refer to the size of the ScrollMate stack itself. So, for example, if the stack is in a column, its width will be limited by the column and a percentage (%) move of 100% will move the stack to the left or right equal to its own width.
If those columns stack for small screens then the stack is likely to go full width and the 100% movement will be almost the width of the browser (there is usually a bit of padding on stacked columns).
Works on all devices
ScrollMate 2 is buttery smooth on all devices including touch screens.
When ScrollMate 1 initially launched over 3 years ago, it worked beautifully on touch devices. Since then, changes to browsers meant that it was hamstrung, became less smooth and finally did not work on touch devices.
Thanks to a major re-write, ScrollMate 2 is smoother than ever while retaining its uniquely low impact on the CPU. There is no other scroll animation stack that can perform like ScrollMate.
Tests have been performed with over 800 animations on a page with no noticeable lag and no excessive fan activity on a MacBook air.
In Use
Restraint is the best policy with any animation. Just because ScrollMate will not technically limit you on performance grounds, taste, decency and good design should do.
Pages with too much animation on them become less appealing and difficult to assimilate.
Remember: The home page on this demo is designed to show lots of possible ScrollMate configurations. It is NOT a serving suggestion.
Inertia
ScrollMate version 1 provided easing functions for the animations but there was no facility to adjust the timing of these.
This was because of several technical challenges arising from the unique features of ScrollMate. Because ScrollMate can reverse its animations such that things may be in their initial or final positions when they appear on screen, introducing a delay on the easing function can cause things to slide into their starting position rather than just being there in the first place.
In Use
One consequence of the inertia setting is that animations can be timed from a single trigger point.
What does this mean? Well, instead of animating a movement from 10-30% of the stacks progress up through the visible part of the browser, we can now tell ScrollMate to animate it from 10-11%
This tight 1% "window" will immediately flip ScrollMate's properties to the finish position but the inertia will prevent an abrupt movement. In the case above, it will still stack 450ms and be nicely smoothed and eased.
Chaining....
Because we also now have a delay setting, we can trigger two animations at the same point but add a delay to one of them. It will then start at an exactly specified time after the first one.
New positioning controls
ScrollMate is the sort of stack that often needs to be floated over or around other content. While this is possible using SectionsPro and SectionsBox there are now two alternative methods that are quick and easy.
In Use
1. ScrollMate Position Control
The simplest method to float a ScrollMate stack is simply to enable the Float in Parent setting using the new Position setting.
There are no complicated sizing controls, your ScrollMate stack will simply become the same size as whatever stack it is inside. The z-index control affects the layering order (front to back).
2. Advanced Positioning Child Stack
Just like BluePrint and SectionsPro, ScrollMate 2 can use the ProStyles Advanced Position stack. While more advanced, it does give you complete control of the size, the x-y position and the layering of the ScrollMate stack.
There are lots of examples in the demo project that show it in use if you need a helping hand to get started.
Just make sure that you have the ProStyles stack installed in your library or else it will not appear as an option in the ScrollMate add child menu.