Modern Animation Plugin With jQuery And CSS3 - EnlivenTricks.js

The EnlivenTricks.js jQuery plugin provides 6 modern animations (fade, shake, scale, swap, loading and morphing) for DOM elements using jQuery and CSS3.

How to use it:

1. Import jQuery library and the EnlivenTricks.js jQuery plugin's files into the html file.

<link rel="stylesheet" href="EnlivenTricks.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="EnlivenTricks.js"></script>

2. Apply a fade animation to an element. Possible parameters:

• duration: the duration of the animation
• disappear: removes the element after fade out
• mode: fade in or fade out

$(".element").EnlivenTricks().fade({
  duration: 500, 
  disappear: false,
  mode: 'in'
})

3. Apply a shake animation to an element. Possible parameters:

• times: the number of times to shake
• wrapper: wrapper element

$(".element").EnlivenTricks().shake({
  times: 6
  wrapper: false
})

4. Apply a scale animation to an element on hover.

$(".element").EnlivenTricks().blob()

5. Apply a swap animation to an element. Possible parameters:

• revert: reverts the animation
• vertical: makes the animation vertical
• next: next element to swap
• callback: callback function

$(".element").EnlivenTricks().swap({
  revert: false, 
  vertical: false, 
  next: null,
  callback: function() {return;}
})

6. Apply a loading animation to an element. Possible parameters:

• color: animation color
• appearance: 'square', 'flash', 'disk', 'spinner', 'fixed-spinner', 'classic-spinner', and 'simple'
• position: custom position
• delayHandler: interger, 'infinite', or execute a function when loading

$(".element").EnlivenTricks().load({
  color: 'white',
  appearance: 'simple',
  position: { left: '42%', right: 0, bottom: 0, top: 0 },
  delayHandler: 5000
})

7. Morph an icon to another Possible parameters:

• next: next icon
• appearance: 'rotate', 'vibrate', 'flip', 'fade', or 'huff'

$(".element").EnlivenTricks().morph({
  // ...
})

Changelog:

2019-01-06

• Fixing DOM access initialization in MagicTrick

2018-11-28

• Added morphing animation for icons.

2018-11-21

• refactoring loader factory
• [Feature] Initializing icons morphing

2018-11-16

• refactor

2018-11-15

• added more loading spinners

2018-11-12

• [FIX] Decreasing shake times max val

2018-11-11

• Enlarging spinner loader size
• Added loading animation.

---

This awesome jQuery plugin is developed by hupiat. For more Advanced Usages, please check the demo page or visit the official website.