Animations & Interactions

User interface design and user interaction design are two closely related disciplines.

One focuses on the design of the visual interface, the other more on the design of the global interaction behavior of the system.

In other words, user interface is how the user faces the system and how the system faces the user. user interaction is how the user acts on the system and how the systems acts on the user.

To make any element animated we can set a class .jds-animate as initializer. We will cover:

JDS Hover Animation

To animate an element with JDS, add the class jds-animation to initiate Animation. Then you need to add another class/name (animation-fade) where describe a animation. Also we can add some ingridiance to the animation by using some extra class like:- animation-hover, animation-infinite, animation-reverse, animation-fast.

You have so meny animation name, follow bellow classes:

Keep in mind we need to add animation-hover or animation-infinite to activate any animation.

Animation Class And Name

Fade In Out

animation-fade

Scale Up

animation-scale-up

Scale Down

animation-scale-down

Slide Top

animation-slide-top

Slide Bottom

animation-slide-bottom

Slide Left

animation-slide-left

Slide Right

animation-slide-right

Slide Top Small

animation-slide-top-small

Slide Bottom Small

animation-slide-bottom-small

Slide Left Small

animation-slide-left-small

Slide Right Small

animation-slide-right-small

Animation long-zoom

animation-long-zoom

Animation Shake

animation-shake

Animation Jump

animation-jump

Animation Float

animation-float

Animation Bounce In

animation-bounceIn

Animation Bounce Up

animation-bounceUp

Animation skew

animation-skew

Animation Grow Roted

animation-grow-rotate

Example of some ingridiance we can apply

animation-hover animation-reverse animation-fast animation-infinite

Also we can use animate.css as another option.

In case of using a CDN, update the link in your HTML:

Or add in a CSS file direcly

@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css);

First of all, you'll need Node and all other dependencies:

$ git clone https://github.com/animate-css/animate.css.git
$ cd animate.css
$ npm install

To animate an element, add the class animated in an element. You can include the class infinite for an infinite loop. Finally you need to add one of the following classes to the element:

Example with CSS class Name

Loading Animation

You need to set some class for making those Interactions

First we neet to use a class jds-skeleton as a perent. Then can set CSS Class skeleton-placeholder in child. You can set any other dome or class inside jds-skeleton dom.

Skeleton List Example

Find more loading information Read more

Spinner:

You need to set some class for making those Interactions

First we neet to use a class jds-skeleton as a perent. Then can set CSS Class skeleton-placeholder in child. You can set any other dome or class inside jds-skeleton dom.

Skeleton List Example

Liquid Loader Example

Spiner Loader Example

Bumping Loader Example

Find more information about Spinners Read more