Background Position

The component that animates the CSS property controling the background-position property of a target element.

Overview

Animate the position of the background image, simple and effective.

The KUTE.js Background Position component enables animation for the CSS backgroundPosition property on most browsers.

It can handle an entire set of input values [x,y], '0% 50%' and even 'left center'. The component always updates the values of the position property via % suffix for simplicity reasons and even if px or any other unit is supported.

While we might not have much use for this kind of animation, some older browsers will love to show you something if that is the case.

Example

Here a couple of possible tween objects:

// provide the exact values for interpolation
let bgPosTween = KUTE.to('selector1',{backgroundPosition:[0,50]}).start();

// provide the coordinates
let bgPosTween = KUTE.to('selector1',{backgroundPosition:"0% 50%"}).start();

// or provide the position names
let bgPosTween = KUTE.to('selector1',{backgroundPosition:"left center"}).start();

Notes