Animation

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:

  • Vertical scroll;
  • Horizontal scroll;
  • Scale;
  • Rotation;
  • Blur;
  • Opacity.

Each effect has a “Viewport” range that controls where the it is active in the page. The effect start 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, both 

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 and 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.

Sparkle's one time animation scroll effects

Updated for Sparkle 3.0

Auf Deutsch

En Français

In Italiano

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2020 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.