View on GitHub

Animations

TODO

On this page

How it works

@Todo

Example

Animated element

html

<div data-of-animation>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

Animated element

html

<div data-of-animation='{"name": "fadeInDown", "duration": 2000, "delay": 300 }'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "duration": 2000, "delay": 300}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInRight", "duration": 2000, "delay": 300}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInUp", "duration": 2000, "delay": 300}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

Animation list

Fading entrances

fadeInLeftBig

fadeInDown

fadeInRightBig

fadeInTopLeft

fadeInDown

fadeInTopRight

fadeInLeft

fadeIn

fadeInRight

fadeInBottomLeft

fadeInUp

fadeInBottomRight

fadeInUp

Flippers

flip

flipInX

flipInY

Lightspeed

lightSpeedInLeft

lightSpeedInRight

Rotating entrances

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

Zooming entrances

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

html

<h3>Fading entrances</h3>
<div class="row row-cols-3 justify-content-center">
  <div data-of-animation='{"name": "fadeInLeftBig"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInLeftBig
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInDownBig"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInDown
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInRightBig"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInRightBig
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInTopLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInTopLeft
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInDown"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInDown
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInTopRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInTopRight
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInLeft
    </div>

  </div>
  <div data-of-animation='{"name": "fadeIn"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeIn
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInRight
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInBottomLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInBottomLeft
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInUp"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInUp
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInBottomRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInBottomRight
    </div>

  </div>
  <div data-of-animation='{"name": "fadeInUpBig"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      fadeInUp
    </div>

  </div>
</div>

<hr>

<h4 class="mb-4">Flippers</h4>
<div class="row row-cols-3 justify-content-center">
  <div data-of-animation='{"name": "flip"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      flip
    </div>

  </div>
  <div data-of-animation='{"name": "flipInX"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      flipInX
    </div>

  </div>
  <div data-of-animation='{"name": "flipInY"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      flipInY
    </div>

  </div>
</div>

<hr>

<h4 class="mb-4">Lightspeed</h4>
<div class="row row-cols-3 justify-content-center">
  <div data-of-animation='{"name": "lightSpeedInLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      lightSpeedInLeft
    </div>

  </div>
  <div data-of-animation='{"name": "lightSpeedInRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      lightSpeedInRight
    </div>

  </div>
</div>

<hr>

<h4 class="mb-4">Rotating entrances </h4>
<div class="row row-cols-3 justify-content-center">
  <div data-of-animation='{"name": "rotateIn"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      rotateIn
    </div>

  </div>
  <div data-of-animation='{"name": "rotateInDownLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      rotateInDownLeft
    </div>

  </div>
  <div data-of-animation='{"name": "rotateInDownRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      rotateInDownRight
    </div>

  </div>
  <div data-of-animation='{"name": "rotateInUpLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      rotateInUpLeft
    </div>

  </div>
  <div data-of-animation='{"name": "rotateInUpRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      rotateInUpRight
    </div>

  </div>
</div>

<hr>

<h4 class="mb-4">Zooming entrances</h4>
<div class="row row-cols-3 justify-content-center">
  <div data-of-animation='{"name": "zoomIn"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      zoomIn
    </div>

  </div>
  <div data-of-animation='{"name": "zoomInDown"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      zoomInDown
    </div>

  </div>
  <div data-of-animation='{"name": "zoomInLeft"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      zoomInLeft
    </div>

  </div>
  <div data-of-animation='{"name": "zoomInRight"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      zoomInRight
    </div>

  </div>
  <div data-of-animation='{"name": "zoomInUp"}'>
    <div class="p-3 mb-2 bg-primary text-white text-center">
      zoomInUp
    </div>

  </div>
</div>

<hr>

Duration

Animated element

html

<div data-of-animation='{"name": "fadeInLeft", "duration": 500}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "duration": 1000}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "duration": 1500}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "duration": 2000}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "duration": 2500}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "duration": 3000}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

Delay

Animated element

html

<div data-of-animation='{"name": "fadeInLeft", "delay": 500}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "delay": 1000}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "delay": 1500}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "delay": 2000}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "delay": 2500}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>
<div data-of-animation='{"name": "fadeInLeft", "delay": 3000}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

Offset

Animated element

html

<div data-of-animation='{"name": "fadeInLeft", "offset" : 300}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

<div data-of-animation='{"name": "fadeInLeft", "offset" : 250}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

Repeat

Animated element

html

<div data-of-animation='{"name": "fadeInLeft", "repeat": true}'>
  <div class="p-3 mb-2 bg-primary text-white text-center">
    Animated element
  </div>

</div>

Usage

Markup

The required markup for a animation is only a data attribute on the HTML element:


<div data-of-animation></div>

Options

You can pass extra options as JSON value of the data attribute. Here is the list of all available options ( alphabetically):

Option	Type	Default	Explanation
`name`	`string`	`'fadeIn'`	@Todo.
`duration`	`number`	`1500`	@Todo.
`delay`	`number`	`0`	@Todo.
`offset`	`number`	`0`	@Todo.
`repeat`	`boolean`	`false`	@Todo.

Events

Event	Description
`in.of.animation`	@Todo
`out.of.animation`	@Todo

const element = document.getElementById('animate')

element.addEventListener('initialized.of.animation', async () => {
  const animation = await openFrontend.Animation.then(component => component.getInstance(element))
})