Skip to content
Snippets Groups Projects
Select Git revision
  • 3460441-fix-the-issue
  • 1.0.x default
  • 1.1.x
  • 1.1.1
  • 1.1.0
  • 1.0.5
  • 1.0.4
  • 1.0.3
  • 1.0.2
  • 1.0.1
  • 1.0.0
  • 1.0.0-beta1
12 results

animatecss-3460441

  • Clone with SSH
  • Clone with HTTPS
    • Forked from project / animatecss
    1 commit ahead of the upstream repository.
    user avatar
    3460441-fix-the-issue:fixed all phpcs issues
    bhavesh das authored
    0b180b70
    History
    user avatar 0b180b70
    History
    Name Last commit Last update
    animatecss_ui
    .gitlab-ci.yml
    LICENSE.txt
    README.md
    animatecss.api.php
    animatecss.info.yml
    animatecss.install
    animatecss.libraries.yml
    animatecss.module
    composer.json
    logo.png
    README.md

    INTRODUCTION

    This module integrates the 'Animate.css' library - https://animate.style/, Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

    FEATURES

    'Animate.css' library is:

    • Cross-browser animations

    • Usage with Javascript

    • Easy to use

    • Responsive

    • Customizable

    REQUIREMENTS

    'Animate.css' library:

    INSTALLATION

    1. Download 'AnimateCSS' module - https://www.drupal.org/project/animatecss

    2. Extract and place it in the root of contributed modules directory i.e. /modules/contrib/animatecss

    3. Create a libraries directory in the root, if not already there i.e. /libraries

    4. Create a 'animate.css' directory inside it i.e. /libraries/animate.css

    5. Download 'Animate.css' library https://github.com/animate-css/animate.css/archive/main.zip

    6. Place it in the /libraries/animate.css directory i.e. Required files:

    • /libraries/animate.css/dist/animate.compat.css
    • /libraries/animate.css/dist/animate.css
    • /libraries/animate.css/dist/animate.min.css
    1. Now, enable 'AnimateCSS' module

    USAGE

    It’s very simple to use a library, which can be downloaded as a one CSS file and added to your project to use one of many predefined animations by adding a class to an element.

    You can customize selected animations by setting the delay and speed of the effect. It’s possible to use animations with pure HTML and CSS projects, but you can also implement Javascript as well.

    BASIC USAGE

    After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

    An animated element

    USAGE WITH JAVASCRIPT

    You can do a bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

    const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft');

    How does it Work?

    1. Enable "AnimateCSS" module, Follow INSTALLATION in above.

    2. Add animate.css classes to templates or add classed with javascript file in your theme, Follow USAGE in above.

    3. Enjoy that.

    Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible.

    MAINTAINERS

    Current module maintainer:

    DEMO

    https://animate.style/