The wix-animations module contains functionality for working with animations. . Learn more (Additional information about this section) Guides Introduction (Perform actions on an object) Functions : Creates a new animation timeline. timeline( ) Subcategories : An animation timeline. TimeLine Related Content Image and Text Animation 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 function. timeline() Add animation attributes and sequence them within the timeline using the function. add() Control the playing of the timeline using the , , , and functions. play() reverse() pause() replay() To use the Animations API, import from the module: wixAnimations wix-animations wixAnimations ; import 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 function. add() Control the timeline playback using the , , , and functions. play() reverse() pause() replay() Use the timelineOptions parameter to specify whether the timeline repeats and how the repetitions are played. Syntax ( ): function timeline [timelineOptions: TimeLineOptions] TimeLine timeline Parameters Create a timeline wixAnimations ; timeline = wixAnimations.timeline(); import from 'wix-animations' let Create a timeline that repeats wixAnimations ; timeline = wixAnimations.timeline({ : }); import from 'wix-animations' let "repeat" 3 Create a timeline with options wixAnimations ; timeline = wixAnimations.timeline(
  { : , : , : }
); import from 'wix-animations' let "repeat" 3 "repeatDelay" 100 "yoyo" true Create a timeline, add animation attributes, and add buttons for controlling timeline playback wixAnimations ; timeline = wixAnimations.timeline(
  { : , : , : }
);

$w.onReady( { myImage = $w( );

  timeline
    .add( myImage, { : , : , : } )
    .add( myImage, { : , : } );

  $w( ).onClick( {
    timeline.play();
  } );

  $w( ).onClick( {
    timeline.reverse();
  } );

  $w( ).onClick( {
    timeline.pause();
  } );

  $w( ).onClick( {
    timeline.replay();
  } );
} ); import from 'wix-animations' let "repeat" 3 "repeatDelay" 100 "yoyo" true ( ) function const "#myImage" "rotate" 360 "scale" .5 "duration" 1000 "opacity" 0 "duration" 1000 "#playButton" => () "#reverseButton" => () "#pauseButton" => () "#replayButton" => () Returns The newly created timeline. Return Type: TimeLine Previously published at https://www.wix.com/velo/reference/wix-animations/timeline

Step-by-Step Guide on How to Build a Web Application with Velo

Velo Promises in Action: Key Tips to Call the Asynchronously-Run Functions

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

5 Hot Velo Practices to Test and Debug Your Website Code

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps