top of page

Introducing: Timeline Animation API

A blue circle with a white animated ticking hand Black background with a faded violet V logo for Velo

Set th ngs  n motion

There’s a new way to shine online. Use the Timeline API to create brilliant sequences of animations that will keep visitors engaged throughout your site.

micro

→

images

micro

From

on

and

to

visual

breakthrough

EXPERIENCES.

BUTTONS

BUTTONS

text,

FLIP ME

An hourglass animation that has black circles and a pink one falling within it

Take visitors

on a wild ride

An animation of a solar system with a big pink circle for the sun, a small blue one for the earth and a smaller white one for the moon that change according to the four animation attribute buttons below it

Compose multiple elements in a timeline using 4 attributes— position, scale, rotation and opacity. Add easing effects for natural movement, and you’ve got the animated experience you imagine.

How it works

Circle Scale

Circle Position

Rectangle Opacity

Rectangle Rotation

timeline({repeat: -1})

  .add($w('#circle'), {

    duration: 4000,

    scale: 1.3,

    easing: 'easeLinear'

  }, 0)

  .add($w('#circle'), {

    duration: 4000,

    x: 300,

    easing: 'easeLinear'

  }, 0)

  .add($w('#rectangle'), {

    duration: 3000,

    opacity: 0,

    easing: 'easeLinear'

  }, 0)

  .add($w('#rectangle'), {

    duration: 4500,

    rotate: 180,

    easing: 'easeLinear'

  }, 0)

abstract_big_007a.png

Explore examples

Explore examples

Explore examples

Explore examples

Open these examples and open your mind. You can edit these ready-made animations directly on your site, or learn how to create each one step-by-step.

An animated thumbnail of the words on text

Text 2.0

Make your words stand out with microinteractions on text.

An animated thumbnail of the clock maze

Clock maze

Compose an experience of multiple animations and moving elements.

An animated thumbnail of a pink spinning button

BUTTONS

Drive visitors toward action with buttons that transform on hover.

An animated thumbnail that reads Now you try

NOW YOU TRY

Mix text and shapes to reveal surprise messages on your page.

A thumbnail of the hourglass animation

Flip me

Create custom, ongoing animations that keep your visitors’ attention.

An thumbnail of a rotating pink circle
6_10.gif

It’s your world

Play with animation attributes to recreate the Solar System, your way.

Aug 25

2PM EST

Live webinar

Learn how you can elevate your site with custom animations using the Timeline API.

Want a pro to do it for you?

A black grid showing the blue clock with a white hand an animation timeline the words Now you try some code and a button that reads Flip me

Create thrilling new experiences

To start using Velo, turn on Dev Mode in Wix or Editor X.

Examples
How it works
Explore examples
Join the live webinar
bottom of page