Animations

A large range of animations for use in the animation component.

Usage

Three ways to import a transition.

Specific

Imports a transition from a category.

/* Template */
import '@htmlplus/core/animation/names/[category]/[name].js';

/* For example */
import '@htmlplus/core/animation/names/flippers/flip.js';

Category

Imports a category.

/* Template */
import '@htmlplus/core/animation/names/[category]/all.js';

/* For example */
import '@htmlplus/core/animation/names/fading-entrance/all.js';

All

Imports all categories.

import '@htmlplus/core/animation/names/transition/all.js';

Categories

All animations are based on the popular Animate.css library.

Attention Seekers

Flash
Head Shake
Heart Beat
Jello
Pulse
Rubber Band
Shake X
Shake Y
Shake
Swing
Tada
Wobble

Back Entrances

Back In Down
Back In Left
Back In Right
Back In Up

Back Exits

Back Out Down
Back Out Left
Back Out Right
Back Out Up

Bouncing Entrances

Bounce In Down
Bounce In Left
Bounce In Right
Bounce In Up
Bounce In

Bouncing Exits

Bounce Out Down
Bounce Out Left
Bounce Out Right
Bounce Out Up
Bounce Out

Fading Entrance

Fade In Bottom Left
Fade In Bottom Right
Fade In Down Big
Fade In Down
Fade In Left Big
Fade In Left
Fade In Right Big
Fade In Right
Fade In Top Left
Fade In Top Right
Fade In Up Big
Fade In Up
Fade In

Fading Exits

Fade Out Bottom Left
Fade Out Bottom Right
Fade Out Down Big
Fade Out Down
Fade Out Left Big
Fade Out Left
Fade Out Right Big
Fade Out Right
Fade Out Top Left
Fade Out Top Right
Fade Out Up Big
Fade Out Up
Fade Out

Flippers

Flip In X
Flip In Y
Flip Out X
Flip Out Y
Flip

Light Speed

Light Speed In Left
Light Speed In Right
Light Speed Out Left
Light Speed Out Right

Rotating Entrances

Rotate In Down Left
Rotate In Down Right
Rotate In Up Left
Rotate In Up Right
Rotate In

Rotating Exits

Rotate Out Down Left
Rotate Out Down Right
Rotate Out Up Left
Rotate Out Up Right
Rotate Out

Sliding Entrances

Slide In Down
Slide In Left
Slide In Right
Slide In Up

Sliding Exits

Slide Out Down
Slide Out Left
Slide Out Right
Slide Out Up

Specials

Bounce
Hinge
Jack In The Box
Roll In
Roll Out

Zooming Entrances

Zoom In Down
Zoom In Left
Zoom In Right
Zoom In Up
Zoom In

Zooming Exits

Zoom Out Down
Zoom Out Left
Zoom Out Right
Zoom Out Up
Zoom Out

PrevVue


Select Your Framework

Select...