Coffeekraken.io 0.0.1

SBodymivinComponent

Extends SWebComponent

Simple webcomponent wrapper around the freaking cool bodymovin library. Features:

  • All bodymovin capabilities
  • Use it as an image tag <s-bodymovin src="..."></s-bodymovin>
  • Support a reactive mode that play the animation when a special class is detected
  • Cool "yoyo" mode that will play the animation backward when complete

Example

    <s-bodymovin src="my-cool-animation.json" yoyo></s-bodymovin>

Bodymovin repository : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Author : Olivier Bossel olivier.bossel@gmail.com

Attributes

Here's the list of available attribute to set on the element.

animationData

Bodymovin animation data object

Type : { object }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : null

path

Bodymovin json animation relative path

Type : { String }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : null

src

Alias to the "path" prop

Type : { String }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : null

loop

Set if the animation has to loop or not

Type : { Boolean }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : false

autoplay

Set if the animation has to autoplay or not

Type : { Boolean }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : false

direction

Specify the direction of the animation

Type : { Integer }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : 1

speed

Set the playback speed

Type : { Number }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : 1

name

Set a name to the animation to get it later through the bodymovin api

Type : { String }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : null

renderer

Set the renderer to use

Type : { String }

See more : http://github.coffeekraken.io/bodymovin/bodymovin/^4.0.0

Default : svg

playOn

Specify when to play the animation

Type : { String }

Default : null

reactive

Specify if we want the animation to react to a class change

Type : { Boolean }

Default : false

reactiveClass

Specify the class that the bodymovin will react to

Type : { String }

Default : active

reactiveBackward

Specify if the animation has to take place when the reactive class is removed. If false, the animation will simply jump to start when the class is removed.

Type : { Boolean }

Default : false

yoyo

Specify if the animation has to play backward when arrived to the end. Like a yoyo

Type : { Boolean }

Default : false

yoyoSpeed

Specify the speed for the yoyo backward animation

Type : { Number }

Default : 1

yoyoTimeout

Specify how many time to wait before playing the animation back to his starting point

Type : { Number }

Default : 0

loadingClass

Specify the laoding class to set on the element before the animation is ready to play

Type : { String }

Default : loading

Methods

bodymovin

Heres the list of bodymovin methods that are exposed on the component itself:

  • play()
  • pause()
  • stop()
  • setSpeed(speed)
  • setDirection(direction)
  • goToAndPlay(timeOrFrame, isFrame)
  • goToAndStop(timeOrFeame, isFrame)
  • playSegments(segments)