You are here

Home » API reference » Animations (JS/CSS) 8

README.txt in Animations (JS/CSS) 8 

Animations Drupal Module
================================================================================

The animations module consist of a set of cool cross-browser animations based on CSS/JS. You can easily add multiple predefined animations to your site, using CSS selectors in the module settings page.

Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Installation & Usage Example
Download and install the module, use "drush animations-libraries" or download the libraries manually -> see requirements at the bottom.
To add the desired animation to all your "H1" tags as an example go to /admin/config/animations/config
Choose your desired effects and add one selector per line to apply the effect and save.
Selector Examples

CSS selector	Description
input, textarea	Use all single line text fields and textareas on site.
.your-form-class *	Use all text fields in given form class.
#your-form-id *	Use all text fields in given form id.
#your-form-id *:not(textarea)	Use all single line text fields but not textareas in given form id.
#your-form-id input:not(input[type=password])	Use all single line text fields but not password text fields in given form id.


For more advanced users: You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

$('#yourElement').addClass('animated bounceOutLeft');

List of animations
typewriter
bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Add your effect? Propose it in the issue queue or write a patch :)

All the cool kids use Typed.js
https://slack.com
https://envato.com
https://productmap.co/
...

Dependencies
The module currently integrates the following libraries
Animate.css and typed.js - use "drush animations-libraries" after enabling the module to download all the libraries or download them manually.

Download, extract and rename the folders to have the correct paths:

[DRUPAL_ROOT]/libraries/animate/animate.css (downloaded from https://github.com/daneden/animate.css version 3.5.2 and higher)
[DRUPAL_ROOT]/libraries/typed/js/typed.js (downloaded from https://github.com/mattboldt/typed.js/ version 1.1.4 and higher)

File

README.txt
View source 
  1. 

  2. Animations Drupal Module

  3. ================================================================================

  4. 

  5. The animations module consist of a set of cool cross-browser animations based on CSS/JS. You can easily add multiple predefined animations to your site, using CSS selectors in the module settings page.

  6. 

  7. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

  8. 

  9. Installation & Usage Example

  10. Download and install the module, use "drush animations-libraries" or download the libraries manually -> see requirements at the bottom.

  11. To add the desired animation to all your "H1" tags as an example go to /admin/config/animations/config

  12. Choose your desired effects and add one selector per line to apply the effect and save.

  13. Selector Examples

  14. 

  15. CSS selector	Description

  16. input, textarea	Use all single line text fields and textareas on site.

  17. .your-form-class *	Use all text fields in given form class.

  18. #your-form-id *	Use all text fields in given form id.

  19. #your-form-id *:not(textarea)	Use all single line text fields but not textareas in given form id.

  20. #your-form-id input:not(input[type=password])	Use all single line text fields but not password text fields in given form id.

  21. 

  22. 

  23. For more advanced users: You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:

  24. 

  25. $('#yourElement').addClass('animated bounceOutLeft');

  26. 

  27. List of animations

  28. typewriter

  29. bounce

  30. flash

  31. pulse

  32. rubberBand

  33. shake

  34. headShake

  35. swing

  36. tada

  37. wobble

  38. jello

  39. bounceIn

  40. bounceInDown

  41. bounceInLeft

  42. bounceInRight

  43. bounceInUp

  44. bounceOut

  45. bounceOutDown

  46. bounceOutLeft

  47. bounceOutRight

  48. bounceOutUp

  49. fadeIn

  50. fadeInDown

  51. fadeInDownBig

  52. fadeInLeft

  53. fadeInLeftBig

  54. fadeInRight

  55. fadeInRightBig

  56. fadeInUp

  57. fadeInUpBig

  58. fadeOut

  59. fadeOutDown

  60. fadeOutDownBig

  61. fadeOutLeft

  62. fadeOutLeftBig

  63. fadeOutRight

  64. fadeOutRightBig

  65. fadeOutUp

  66. fadeOutUpBig

  67. flipInX

  68. flipInY

  69. flipOutX

  70. flipOutY

  71. lightSpeedIn

  72. lightSpeedOut

  73. rotateIn

  74. rotateInDownLeft

  75. rotateInDownRight

  76. rotateInUpLeft

  77. rotateInUpRight

  78. rotateOut

  79. rotateOutDownLeft

  80. rotateOutDownRight

  81. rotateOutUpLeft

  82. rotateOutUpRight

  83. hinge

  84. rollIn

  85. rollOut

  86. zoomIn

  87. zoomInDown

  88. zoomInLeft

  89. zoomInRight

  90. zoomInUp

  91. zoomOut

  92. zoomOutDown

  93. zoomOutLeft

  94. zoomOutRight

  95. zoomOutUp

  96. slideInDown

  97. slideInLeft

  98. slideInRight

  99. slideInUp

  100. slideOutDown

  101. slideOutLeft

  102. slideOutRight

  103. slideOutUp

  104. 

  105. Add your effect? Propose it in the issue queue or write a patch :)

  106. 

  107. All the cool kids use Typed.js

  108. https://slack.com

  109. https://envato.com

  110. https://productmap.co/

  111. ...

  112. 

  113. Dependencies

  114. The module currently integrates the following libraries

  115. Animate.css and typed.js - use "drush animations-libraries" after enabling the module to download all the libraries or download them manually.

  116. 

  117. Download, extract and rename the folders to have the correct paths:

  118. 

  119. [DRUPAL_ROOT]/libraries/animate/animate.css (downloaded from https://github.com/daneden/animate.css version 3.5.2 and higher)

  120. [DRUPAL_ROOT]/libraries/typed/js/typed.js (downloaded from https://github.com/mattboldt/typed.js/ version 1.1.4 and higher)