Product Updates | Contact Support | System Status
Page Contents

    Custom Transitions with Animate.css (Beta)

    We have 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

    Page last updated on 18 Nov 2021