Big White Duck
When I reviewed Mover from DKStacks and Animagic from ElixirGraphics, I mentioned that the one had 10, the other 35 animation effects. Today we get a stack that has unlimited effects! Enter Scroll Mate from Big White Duck.
Scroll Mate isn’t one of those stacks that you’ll have ‘up and running’ within seconds of dropping it onto your page. I needed to consult the manual – so off you go now and visit BWD’s demo site. It is the manual. Or read on and I’ll explain. Scroll Mate will animate any stack that you drop into it*. The animation takes place within a distance that the screen content is scrolled. There are no speed settings, as with Mover or Animatic.
The first HUD elements will allow you to set this distance, but first you’ll want to decide when the animation begins. Animate Trigger has the following options: Top Edge – Animates the stack from when the top of the container enters the viewport to when it exits. Bottom Edge – From when the bottom of the container enters the viewport to when it exits. In view – From when the top of the container enters the viewport to when the bottom exits.
With Animate On you choose whether to animate on entry or exit. On Entry and On Exit determine when the set values are applied. A scale set to 0.5 On Entry will zoom up from 1/2 size to full size. Set to On Exit it will zoom down to reach the set scale value as it exits the set range.
The Start Percentage and End Percentage define the amount of screen scroll during which the complete animation should take place. The shorter the range, the faster the animation; the higher the range, the slower the animation.
Easing may be set to Ease-In-Out; Ease-In; Ease-Out or Linear, while the next portion of the HUD sets the animation effects themselves.
Once Only sets the animation to deactivate once it has scrolled up off the page. Elements that are unable to scroll off the page – a footer, for instance – will continue to animate when the page is scrolled.
Opacity sets the translucency of the stack at the beginning of the transition.
Scale sets the size of the stack at the beginning of the transition, allowing stacks to zoom into the page by either getting larger or smaller.
Rotate X will rotate Scroll Mate‘s contents along the horizontal axis during the animation, whilst Rotate Y will rotate along the vertical axis. Entering values into both boxes will spin the contents along both axis simultaneously but may cause severe motion sickness. A value of 720º will cause your content to rotate twice.
A positive value entered into Move X, will move the content from right to left, whilst a negative value will reverse that movement.
A positive value for Move Y will animate the content upwards and a negative value downwards as it enters the transition area. Combining the X and Y axes will cause a diagonal transition to take place. When Add Perspective is activated, Z values become visible in the HUD. Rotate Z, will rotate your content clockwise or anti-clockwise. Combining Rotate Z with an X or Y transition, will move the point of the rotation – even to a point outside the webpage, if you wish.
Translate Z in combination with X and/or Y translations, causes a transition up or down the Z axis – the ‘3rd dimension’. It allows your content to get larger and smaller to simulate the 3rd dimension in a 2d space.
With the activation of Perspective, Origin – the starting point for the Z transitions also becomes visible. Setting Perspective’s Origin, in combination with other transitions, will cause a stack to stand up, lie down or open and close like a door when it scrolls into or out of view.
The Crop button limits the effect to the vertical scrolling boundaries of the document. Leaving the boundaries uncropped allows elements to remain unaffected by enter effects when they are near the top of the page or by exit effects near the bottom.
The Contain button restricts the animation to the boundaries of the Scroll Mate container. This can be unchecked in order to allow animations to proceed across the full width and height of the browser. However, many ‘traditional’ RW themes limit content to a maximum width. Scroll Mate cannot break out of these boundaries. With Freeform themes such as Foundation, FSR, Pure and BootSnap the full width of the browser can be utilised for your animations.
Once you’ve got your head around these basic scroll effects, you can then check the box Detailed Scrolling and can play to your hearts content with multiple combinations of each axis. And when you are finished with Detailed Scrolling, you can try nesting Scroll Mate stacks.
Scroll Mate animations are pure CSS animations (who would expect anything else from BWD?) so they are especially smooth, making them ideal for combining with parallax effects. Scroll Mate is, of course, fully responsive and is also free. If you are a fan of animated content and/or semi parallax effects you’ll find the ideal companion in Scroll Mate.
A word of warning, though – animations can quickly overwhelm a visitor. Don’t overdo it!
Scroll triggered animations are not supported by some older browsers which shall remain nameless. The stack degrades gracefully, allowing your page to display normally with all content being shown as static content without the animations.
* I was surprised to see that even Bricks from Elixir, which is notorious for only functioning when it loads with the initial page load, can be dropped into Scroll Mate.