JSDK Example

Timeline ANIMATION

Sequential Play

Timelines let you can play multiple animations together. By default each animation added to the timeline starts after the previous animation ends.

Creating a timeline:

let myTimeline = new.Timeline(config);

argument	Type	Info	REQUIRED
config	TimelineInit	The follow properties will be inherited by child animations: duration delay endDelay autoreset	Y

Add a child animation to a timeline:

myTimeline.add(animInit);

argument	Type	Info	REQUIRED
animInit	TimedTweenAnimInit or TimedFrameAnimInit	The child animation config, override the timeline default config	Y

CODE EXAMPLE

let anim = new Timeline({
    targets: '.el',
    autoreset: false
})
.add({
    type: 'tween',
    keys: { top: '-=25' }
})
.add({
    type: 'tween',
    keys: { left: '+=250' }
})
.add({
    type: 'tween',
    keys: { top: '+=50' }
})
.add({
    type: 'tween',
    keys: { left: '-=250' }
})
.add({
    type: 'tween',
    keys: { top: '-=25' }
})

$1('#demo').on('click', () => {
    anim.play()
})