We've added custom transition functionality for annotations. It uses Animate.css from Daniel Eden (@_dte, GitHub).

To use the transitions:

  1. Add this CSS URL to your project (in "Settings") - //hapyak_demos.s3.amazonaws.com/css/light-styles.css 
  2. Manually add class names to the annotation by clicking "Edit", "Add Class", and entering "animated (the name of the animation) example: "animated zoomInLeft".

    The following animation names are valid in HapYak.
    bounce
    flash
    pulse
    wobble
    rubberBand
    shake
    swing
    tada
    flip

    hinge

    bounceIn
    bounceInUp
    bounceInDown
    bounceInLeft
    bounceInRight

    fadeInUpBig
    fadeInDownBig
    fadeInLeftBig
    fadeInRightBig
    fadeInRight

    flipInX
    flipInY

    lightSpeedIn

    rotateIn
    rotateInDownLeft
    rotateInDownRight
    rotateInUpLeft
    rotateInUpRight

    rollIn
    zoomIn
    zoomInLeft
    zoomInRight
    zoomInUp
    zoomInDown
Did this answer your question?