Timeline Animation API, a new Velo API, opens a whole new world of custom animations for Wix sites. With just a few lines of code, you can bring movement and life to your website.

The Timeline Animation API lets you create ongoing (constant movement) animations as well as user interaction animations. Moreover, you are no longer confined to the Editor “In animation” presets - you can create your own custom in-animations.

‘Timeline’ also allows you to compose advanced animations by synchronizing multiple animations with matched elements, control them, and precisely manage their timing and easing.

Let’s see how it works:

First, If you want to use Timeline Animation API on your site, open the Editor’s ‘Dev Mode’ and add the following line before the 'onReady' function - import { timeline } from 'wix-animations'

______________________________________________________________________

import { timeline } from 'wix-animations'

$w.onReady(function () {

});

____________________________________________________________________

Now you can write your animations using these four building blocks: Opacity, Rotate, Scale, & Position.

Opacity values range between 0-1. On 0 (opacity:0), the element on stage will be transparent. On 1 (opacity:1), the element will have no transparency.

Scale 1 (scale:1)reflects the element size on the Wix Editor stage. To double an element size, use a value of 2 (scale:2). To shrink the element by half, use a value of 0.5 (scale:0.5).

You can also control the X and Y axes, and can scale up each axis quite easily using (scaleX:1.5), for example.

To rotate an element, you need to give it a degree value in one of two ways:

1. Using number (rotate: 90) will be relative to your site's layout

2. Using string (rotate: ’+=90’) will be relative to where the last animation ended.

When you write your animation, you can choose between the two options.

When changing an element’s position on your site, values represent a change in pixel unit.

1. Using number (x:20,y:40) will be relative to your site's layout

2. Using string (x:’+=20’,y:’+=40’) will be relative to where the last animation ended.

When you write your animation, you can choose between the two options above.

On the Hip Hop Venue Template, I created an on-going animation. By using x and y values, I defined my elements’ position on stage. I also defined that the elements will move forever with {repeat: -1} and used the {yoyo:true} option to reverse the animation play for each successive repetition. To make the elements move naturally, I added 'easeInOutQuad'easing. In order to play all the animated elements together from the beginning of the ‘Timeline’, I added an offset value of 0.

_____________________________________________________________________

timeline({repeat: -1, yoyo: true})

.add($w('#rainbow'), {y: 20, duration: 1900, easing: 'easeInOutQuad'})

.add($w('#yo'), {x: 70, duration: 1900, easing: 'easeInOutQuad'}, 0)

.add($w('#clouds'), {x: 20, duration: 1900, easing: 'easeInOutQuad'}, 0)

.add($w('#pizza'), {y: 20, duration: 1900, easing: 'easeInOutQuad'}, 0)

.play()

______________________________________________________________________

On the Interior Design Template, I created a user interaction animation.

First, I defined the animation for each image, then I added a play function on mouse-in and a reverse function on mouse-out. I created a ‘hit area’ with a transparent box that will define where the mouse should be, in order to play/reverse the animation.

_____________________________________________________________________

import {timeline} from 'wix-animations'

let animate

$w.onReady(function () {

animate = timeline()

.add($w('#greenImg'), {y:-150,x:-300,scale:0.5,duration:600,easing: 'easeInOutCirc'})

.add($w('#redImg'), {y: -300,x:200,scale:0.5,duration:600,easing: 'easeInOutCirc'}, 0)

.add($w('#blueImg3'), {y: 50, x:200,scale: 0.6, duration: 600, easing: 'easeInOutCirc'}, 0)

});

export function hitArea_mouseIn(event) {

animate.play()

}

export function hitArea_mouseOut(event) {

animate.reverse()

}

______________________________________________________________________

On the Designer's Blog & Forum Template, I created a custom in-animation. I had a specific vision for how the animation should behave, so I didn't choose animations from the Editor’s in-animation panel, but rather wrote my own. To create my in-animation, I defined in the properties panel the image’s state to be ‘Hidden on load’. Then, I created my animation and named it ‘wink’. I applied Wink to all the images on stage, giving them different starting times with offsets.

_____________________________________________________________________

import {timeline} from 'wix-animations'

const wink = [

{scaleY: 0, duration: 0, easing: 'easeOutExpo'},

{scaleY: 1, duration: 1200, easing: 'easeOutExpo'},

{opacity: 1, duration: 200, easing: 'easeOutExpo'}

];

$w.onReady(function () {

timeline()

.add($w('#image1'), wink)

.add($w('#image2'), wink, 300)

.add($w('#image3'), wink, 600)

.add($w('#image4'), wink, 900)

.add($w('#image5'), wink, 1200)

.add($w('#image6'), wink, 1500)

.add($w('#image7'), wink, 1800)

.add($w('#image8'), wink, 2100)

.add($w('#image9'), wink, 2400)

.play()

});

______________________________________________________________________