Skip to content

animations

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

animations

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

Animation Documentation - Sstudiosdev-lib

The Sstudiosdev-lib library provides a range of predefined animations to enhance the user experience on web applications. These animations are easy to implement and can be customized to suit the project's needs.

List of Available Animations

All animations are from the latest version of the npm library.

fadeIn

    <div class="example fadeIn">
        This message is an example
    </div>

fadeOut

    <div class="example fadeOut">
        This message is an example
    </div>

shake

    <div class="example shake">
        This message is an example
    </div>

bounce

    <div class="example bounce">
        This message is an example
    </div>

pulse

    <div class="example pulse">
        This message is an example
    </div>

spin

    <div class="example spin">
        This message is an example
    </div>

slideIn

    <div class="example slideIn">
        This message is an example
    </div>

slideOut

    <div class="example slideOut">
        This message is an example
    </div>

flash

    <div class="example flash">
        This message is an example
    </div>

rubberBand

    <div class="example rubberBand">
        This message is an example
    </div>

swing

    <div class="example swing">
        This message is an example
    </div>

wobble

    <div class="example wobble">
        This message is an example
    </div>

rollIn

    <div class="example rollIn">
        This message is an example
    </div>

rollOut

    <div class="example rollOut">
        This message is an example
    </div>

heartBeat

    <div class="example heartBeat">
        This message is an example
    </div>

tada

    <div class="example tada">
        This message is an example
    </div>

jello

    <div class="example jello">
        This message is an example
    </div>

jackInTheBox

    <div class="example jackInTheBox">
        This message is an example
    </div>

puffIn

    <div class="example puffIn">
        This message is an example
    </div>

puffOut

    <div class="example puffOut">
        This message is an example
    </div>

fadeInDown

    <div class="example fadeInDown">
        This message is an example
    </div>

fadeOutUp

    <div class="example fadeOutUp">
        This message is an example
    </div>

rotateIn

    <div class="example rotateIn">
        This message is an example
    </div>

rotateOut

    <div class="example rotateOut">
        This message is an example
    </div>

Button animations

Remember that these animations work best when using our library in the design part.

btn-GlowHover

    <div class="btn btn-GlowHover">
        This is an example button
    </div>

btn-scale

    <div class="btn btn-scale">
        This is an example button
    </div>

btn-shadow

    <div class="btn btn-shadow">
        This is an example button
    </div>

btn-pulse

    <div class="btn btn-pulse">
        This is an example button
    </div>

btn-bounce

    <div class="btn btn-bounce">
        This is an example button
    </div>