Introduction
Using Sparkle
Elements
Sparkle supports two kinds of animation for most elements, one is triggered by the element itself scrolling into view, the other follows, and is connected to, the scrolling motion.
One time animation
The purpose of one time animation is to produce a reveal effect to the elements it’s applied to.
There are many effects to pick from, they are not shown in the Sparkle canvas, you need to check them in preview.
When the element scrolls into view, the animation triggers once the element has scrolled some more into view, the exact distance is controlled by the “page bottom offset” setting. If the element is in view when the page loads, the animation is immediately triggered.
Once triggered the animation starts after the specified delay, for the specified duration. When setting up animation for multiple elements, the delay setting can be set to different values tor each element, to spread out animations, giving a more organic feel to the whole.
Animation and flashing content is frequently associated with advertising by visitors, so you should strive to use it sparingly and tastefully, particularly when it comes to the repetition. Also animation of elements at the top of the page is sometimes mistaken for slow page loading, so it might be best to avoid it there. The SEO Assistant will warn about this.
Animate while scrolling
Animation effects tied to scrolling give your website a unique, immersive feel and depth.
You can add and combine the following effects:
Each effect has a “Viewport” range that controls where the animation is active in the page. The effect starts when the element enters the viewport range and ends when it leaves it (referring to the original untransformed position of the element). The settings popup for each animation effect shows a preview.
The activation position controls whether the top, middle or bottom position of the element is where the animation starts. This is mainly useful for animations very close to the top 0% position in the viewport, where the top edge would always be within the active range.
Vertical scroll effect
The vertical scroll effect is often referred to as the parallax effect, because of the different page layers moving at different speeds.
Vertical scroll moves the element at a different vertical speed with respect to the page scrolling speed. The speed value is a multiplication factor, i.e. when scrolling 100 pixels with a speed factor of 2 x, the element will move 200 pixels. Positive speed values move the element in the same direction, negative ones in the opposite direction.
An element typically starts motion from its canvas position, and is the farthest at the end of the range. Swapping the direction will make the element starting from the farthest and moving towards the non-transformed canvas position.
Horizontal scroll effect
Similar to vertical scroll, but in the horizontal direction. Additionally the element can move all the way outside of the left or right of the browser window.
If one of the two positions, or both, are outside the browser margins, the motion speed is determined by the browser window width and the range.
When moving horizontally between two canvas positions, the motion is controlled by a speed multiplication factor (like for the vertical scroll).
Scale effect
The scale effect changes the size of the element while scrolling. You specify the target “Scale” value for the final position.
Rotation effect
The rotation effect changes the orientation of the element while scrolling. You specify the target angle value for the final position, and the position of the origin around which the rotation takes effect (default is 50% 50%, the center of the element).
Blur effect
Changing the blurring of an element while scrolling gives an out of focus effect. You specify the blur factor for the final position. By default it’s a fade-out like effect (blurred at the end), by swapping you have a have a fade-in effect, with the fully in focus view at the end of the range.
Opacity effect
The opacity effect changes the transparency of the element while scrolling. You specify the percent opacity value for the final position or, by swapping, the initial value.
Here’s a how-to for a couple animation setups.
Crossfading header
A common web pattern is a header that sticks to the top of the page, and blends in with the hero image when at the top position, so that it doesn’t distract from the center of the page. When scrolling down, the header then morphs into something more compact and with an opaque background to overlay the content further down on the page. The video here shows a preview of what we’ll achieve.
Let’s start with a blank new page, in this case adding an immersive full window image.
Next we’ll add a simple header with a company logo and company name, at the top, in a stick to top group, set to overlap with other stick to top groups.
Now we’ll be adding the fade effect for this header group, setting it to fade out between 5% and 8% of the page viewport, so after very little scrolling. It is also necessary to set the activation position to be the bottom of the group, so that the bottom edge between 5% and 8% is what controls the fading effect.
We can now add the second header, for the rest of the page. The second header will be similar to the first one, but have a mostly opaque background box, so that when the page is scrolled down over text and other content the header is still readable. Since the two headers are technically both visible on the page at the same time, there will be some confusing overlap in the canvas. This is where the layers panel can come in handy to pick things apart, or directly select what you want to change.
The second header will have a similar opacity scrolling animation, but with the top being initially visible (100% opacity).
You can download and check out the complete sample here:
Sliding parallax
Animation tied to scrolling is often called “parallax”, because it’s easy to implement a parallax-like illusion of depth, conveyed by different layers moving at different speed.
Here we’ll create a section of the page that breaks the flow by moving at a different speed, and appearing to be on a separate layer. The video here shows a preview.
The scrolling animation effects move an element relatively to its real, or “non transformed”, position in the canvas. To achieve the effect of a “slit” in the continuity of the page that’s moving with scrolling, we place two layers on top of the moving one, one vertically above and one below, hiding the moving edges.
If you were to view the layer setup from the from a side, it would look something like this:
We can then set up the scroll effects such that the image layer moves at a very subtle accelerated speed compared to the normal scrolling speed, across the entire 0% to 100% height of the viewport:
You will likely need to go back and forth with the preview to get effects feeling just right. You can also spice things up by adding a subtle scaling and rotation. You can check out the complete sample here:
viewer
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
This website makes use of cookies.
Please see our privacy policy for details.
It’s Okay
Deny
