Web Animations - Scroll and Parallax Animations

Scroll animations are similar to reveal animations, but the position on the page (or other values such as the amount of fade) is linked to the scroll position. The more you scroll a page, the further the animation moves. This also means the faster you scroll the page, the faster the animation happens. Instead of the animations running once when the object first appears and then finishing, the object animates whenever the document is scrolled.

When you select the ‘Scroll animations’ option, from the same Reveal tab of the Web Animation dialog (menu Utilities > Web Animations) the top item in the drop-down menu is called ‘Parallax’ followed by a long list of alternate scroll animations

Scroll Animations

The scroll animations are similar to reveal animations, but they are linked to scrolling of the document. So instead of the animations running once when the object appears and then finishing, the object animates whenever the document is scrolled and the speed of the animation is proportional to the scrolling speed. Scroll slowly and the object animates slowly, as you scroll. Scroll faster and the object animates faster too. The speed slider determines how fast the animation runs relative to the scrolling speed.

Parallax Scrolling

The Parallax scrolling animation is where some objects on your page scroll at a different rate to others, giving a parallax effect. Parallax appears near the top of the scroll animation types. The speed slider determines how fast the object scrolls relative to other objects on the page. If set very low, the object hardly moves at all as other objects scroll past it. If set very high the object scrolls at almost the same rate as the other page content.

Parallax scrolling is applied in the same manner as scroll animations above.

Limitations with the Animation system

There are a number of things you also can't perform, please see the list below for what isn't currently possible. We are making improvements to the animations constantly so there are some things we may change in future updates: