Skip to content

Latest commit

 

History

History
106 lines (68 loc) · 3.02 KB

TIMELINE.md

File metadata and controls

106 lines (68 loc) · 3.02 KB

G: Animation timeline

Timelines are useful to stagger a set animations.

Getting started

import animate from '@mystroken/g/animate';
import Timeline from '@mystroken/g/Timeline';

const params = {};
const timeline = new Timeline(params);
timeline
  .add(animate({ el: 'span', p: { y: [0, 100] }}))
  .add(animate({ el: 'span', p: { y: [100, 0] }}))
  .add(animate({ el: 'span', p: { y: [0, 50] }}), '-=50');

// At anytime, run the animations timeline.
timeline.play();


Parameters

A parameters object can be passed to the timeline to have more control on it. Timeline parameters are totally optionnal and you can pass them either at the instantiation time (as on the previous example) or when you call the play method of the timeline (See the play method details).

delay

Determines the delay before the timeline starts running animations (in ms).

Default Type
0 Number

cb

Defines a callback invoked at the end of the timeline.

Default Type
null Function

update

Defines a callback invoked on every frame of the timeline.

Default Type Params
null Function progress (between 0 and 1), elapsed time, total duration


Methods

add

Add an animation to the timeline.

timeline.add(animation, offset);
Argument Types Info Required
animation animateInstance The instance of the animation (animate.js) Yes
offset String| Number offset defines when a animation starts in the timeline. No

If no offset is specifed, the animation will start after the previous animation ends. An offset can be relative to the last animation or absolute to the whole timeline.

  • Relative Offset :

    • offset: "-=100": start this animation 100ms before the previous animation finishes.

    • offset: "+=100": start this animation 100ms after the previous animation finishes.

  • Absolute Offset :

    • offset: 0: start at the beginning in the timeline.

    • offset: 200: start at 200ms in the timeline.

play

Run the timeline.

// You can override the 
// timeline parameters by
// passing an object to the method.
timeline.play({ delay: 1000 });
Argument Types Info Required
parameters Object The parameters used to control the timeline. See the parameters section No

pause

Pause the timeline.

stop

Stop the timeline