vcl-transitions

Diverse transitions.

Usage no npm install needed!

<script type="module">
  import vclTransitions from 'https://cdn.skypack.dev/vcl-transitions';
</script>

README

VCL transitions

Diverse transitions.

Features

There are only very basic transitions supported by this module and we do not seek to add much more. That's because CSS transitions and animations should not be used whenever it is feasible to use the upcoming JavaScript API based Web animation standard.

Classes

Helpers

  • vclAnimContainer
  • vclNoTransitions

Transitions

Opacity based

Fade-in and not out effect.

  • vclFade

Translation based

Slide and fade in and out from location.

  • vclTranslation
  • vclTranslation-center
  • vclTranslation-top
  • vclTranslation-bottom
  • vclTranslation-left
  • vclTranslation-right

Modifiers

  • vclShow: Play the transition when added and in reverse when removed.

Variables

Demo

example.html on GH-pages.