Purchase for only $9

on Codecanyon

Transitions

Transitions define the way content is animated inside the ShowUp popup panel. Each transition have its own set of options that allow them to be customized to needs.

  • Blocks

    Smooth tranistion where the content is created using lots of fading blocks.

    <code>
    Name Default Description
    grid '5x5' Number of cells in format AxB, where A is the number of columns and B is the number of rows.
    effect 'fade' The animation effect that will be applied to each block. Possible values are zoom or fade.
    type 'forward' Direction of the transition. Possible values are forward, backward, center, top-left, top-right, bottom-right, bottom-left, top, right, left, bottom or random.
    duration 400 Duration of animation for each block, in milliseconds.
    delay 200 Delay between animation of each block, in milliseconds.
  • Blinds

    Transition very similar to modern blinds on the office windows.

    <code>
    Name Default Description
    count 16 Total number of blinds.
    type 'left' Direction from where the bars are comming. Possible values are top, right, bottom, left or random.
    duration 300 Duration of animation for each stripe, in miliseconds.
    delay 10 Time each bar is delayed from the previous one, in milliseconds.
  • Stripes

    Lightweight and modern visual effects that animates lots of stripes.

    <code>
    Name Default Description
    count 16 Total number of bars.
    type 'vertical' Drection from where the bars are comming. Possible values are vertical, horizontal or random.
    direction 'left' Drection from where the bars are comming. Possible values are inner, outer, left, right, top, bottom or random.
    duration 380 Duration of animation for each stripe, in miliseconds.
    delay 27 Time each stripe is delayed from the previous one, in milliseconds.
  • Sparkles

    Simple grid transition.

    <code>
    Name Default Description
    grid '5x5' Number of cells in format AxB, where A is the number of columns and B is the number of rows.
    random true Set to true to make slices randomly appear. Set to false to make them synchronized.
    duration 550 Duration of animation for each cell, in milliseconds.
    delay 280 Approximate delay between each cell, in milliseconds.
  • Spiral

    Spiral generation of the content.

    <code>
    Name Default Description
    grid '5x5' Number of cells in format AxB, where A is the number of columns and B is the number of rows.
    start 'random' The corner from which the spiral starts. Possible values are top-left, top-right, bottom-right, bottom-left or random.
    direction 'random' The direction in which the spiral folds. Possible values are CW, CCW or random.
    reverse 'random' Set to true to make spiral unfold from the center. Possible values are no, yes or random.
    duration 450 Duration of animation for each block, in milliseconds.
    delay 20 Delay between animation of each block, in milliseconds.