DOCSEARCHbyAlgolia
Submit Docs

Animatopy

repository·master·Indexed 42 days ago

https://github.com/sarthology/animatopy

A utility tool providing ready-to-use code snippets for the animate.css library, allowing developers to select and copy specific animations without importing the entire library. Version 1.0.0.

Tokens
661
Snippets
3
Records
5
Agent score
3%

What's inside Animatopy

  2. Install and run Animatopy locally

    master

    Animatopy provides snippets for the animate.css library. To run the project locally for development, ensure you have Node and Webpack installed, then follow these steps:

    1. Install dependencies: npm install
    2. Start the development server: npm start
    3. Access the application at http://localhost:8080
    npm install
npm start

  4. How animations are applied and cleaned up

    master

    Animations in Animatopy are applied by appending the animation name and the animated class to a target element's class list. To ensure animations can be re-triggered, the animationend event listener is used to reset the element's className to an empty string once the animation finishes.

    Implementation Pattern:

    const testAnim = (x) => {
    animationSandbox.className = " ";
    animationSandbox.classList += x + ' animated';
    animationSandbox.addEventListener('animationend', (e) => {
        e.currentTarget.className = " ";
    }, false);
};

  5. Trigger Animatopy animations and view CSS

    master

    The js/index.js entrypoint manages the interactive sandbox for Animatopy. It allows users to select an animation from a dropdown (.js--animations) or click a trigger (.js--triggerAnimation) to apply the animation to a sandbox element (#animationSandbox).

    When an animation is triggered:

    1. The animation class and the animated class are added to the sandbox element.
    2. The animationend event is used to clean up the classes once the animation completes.
    3. The corresponding CSS rules are extracted from animate.json and displayed in a code block using PrismJS.
    4. The required HTML structure is displayed in a separate code block.
    // Conceptual usage based on the entrypoint logic:
// 1. Select an animation name (e.g., 'fade-in')
// 2. Apply to element:
animationSandbox.classList.add('fade-in', 'animated');

// 3. The system automatically cleans up after completion:
animationSandbox.addEventListener('animationend', (e) => {
    e.currentTarget.className = " ";
}, false);