paint-brush
Wix-Animation Module Implementation: Follow These Tips to Set It Upby@velo
809 reads
809 reads

Wix-Animation Module Implementation: Follow These Tips to Set It Up

by Velo by Wix
Velo by Wix HackerNoon profile picture

Velo by Wix

@velo

Velo is a full-stack development platform that empowers you to...

April 1st, 2021
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps. The wix-animations module contains functionality for working with a timeline. A timeline defines what animations are played on which page elements and when those are played. The following list outlines the typical process of creating and playing an animation timeline: Creating a timeline, adding animation attributes, and adding buttons for controlling timeline playback. The timeline is used to compose animations together over time.
featured image - Wix-Animation Module Implementation: Follow These Tips to Set It Up
1x
Read by Dr. One voice-avatar

Listen to this story

Velo by Wix HackerNoon profile picture
Velo by Wix

Velo by Wix

@velo

Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.

About @velo
LEARN MORE ABOUT @VELO'S
EXPERTISE AND PLACE ON THE INTERNET.

The wix-animations module contains functionality for working with
animations. Learn more.

Guides (Additional information about this section)

Functions (Perform actions on an object)

Subcategories

Related Content

Introduction

Animation sequences are composed using a timeline. A timeline defines what animations are played on which page elements and when those animations are played.

Typical Animation Process

The following list outlines the typical process of creating and playing an animation timeline:

  • Create a new timeline using the
    timeline()
    function.
  • Add animation attributes and sequence them within the timeline using the
    add()
    function.
  • Control the playing of the timeline using the
    play()
    ,
    reverse()
    ,
    pause()
    , and
    replay()
    functions.

To use the Animations API, import

wixAnimations
from the
wix-animations
module:

import wixAnimations from 'wix-animations';

timeline( )

Creates a new animation timeline.

Description

A timeline is used to compose animations together over time. You can synchronize multiple animations on matched elements, control them as a whole, and precisely manage their timing.

Typically, after creating a new timeline, you add animation attributes and
sequence them within the timeline using the

add()
function.

Control the timeline playback using the

play()
,
reverse()
,
pause()
, and
replay()
functions.

Use the timelineOptions parameter to specify whether the timeline repeats
and how the repetitions are played.

Syntax

function timeline([timelineOptions: TimeLineOptions]): TimeLine

timeline Parameters

image

Create a timeline

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline();

Create a timeline that repeats

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline({"repeat": 3});

Create a timeline with options

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

Create a timeline, add animation attributes, and add buttons for controlling timeline playback

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

$w.onReady( function () {
  const myImage = $w("#myImage");

  timeline
    .add( myImage, {
      "rotate": 360,
      "scale": .5,
      "duration": 1000
    } )
    .add( myImage, {
      "opacity": 0,
      "duration": 1000
    } );

  $w("#playButton").onClick( () => {
    timeline.play();
  } );

  $w("#reverseButton").onClick( () => {
    timeline.reverse();
  } );

  $w("#pauseButton").onClick( () => {
    timeline.pause();
  } );

  $w("#replayButton").onClick( () => {
    timeline.replay();
  } );
} );

Returns

The newly created timeline.

Return Type: TimeLine

Previously published at https://www.wix.com/velo/reference/wix-animations/timeline

L O A D I N G
. . . comments & more!

About Author

Velo by Wix HackerNoon profile picture
Velo by Wix@velo
Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Coffee-web
Hashnode
Learnrepo