All Collections
Annotations
Custom Transitions with Animate.css (Beta)
Custom Transitions with Animate.css (Beta)
Patrick Farley avatar
Written by Patrick Farley
Updated over a week ago

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


Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development. 

Did this answer your question?