A powerful little tool for managing CSS animations

Related tags

CSS animo.js
Overview

NO LONGER BEING SUPPORTED

Please consider https://github.com/ThrivingKings/animo instead

animo.js

A powerful little tool for managing CSS animations. Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic.

###License All code is open source and licensed under MIT. Check the individual licenses for more information.

###Change log ####1.0.3

####1.0.2

  • Fixed extending of body height when using blur function

####1.0.1

  • Fixed callback firing after first animation when stacking animations

####1.0.0

  • Initial release
Comments
  • Add package.json

    Add package.json

    Hi,

    could you please add a package.json file for npm support so that it could be installed via npm (see this issue)? Adding to npm registry would also be appreciated.

    Thanks, BR

    Vito

    opened by lamuertepeluda 7
  • jQuery Deferreds Support

    jQuery Deferreds Support

    What about making animo.js support jQuery deferreds ? I know it supports callbacks, and I can "emulate deferreds", but it would be really nice if animo would behave much like $.animate (which too returns a deferred ).

    Thoughts ?

    opened by pyronaur 4
  • tagging for bower

    tagging for bower

    Hi, can you tag the current version(1.0.3). I got that issue:

    bower retry Request to https://bower.herokuapp.com/packages/animo.js failed with ETIMEDOUT, retrying in 1.3s
    bower animo.js#1.0.3        not-cached git://github.com/ThrivingKings/animo.js.git#1.0.3
    bower animo.js#1.0.3           resolve git://github.com/ThrivingKings/animo.js.git#1.0.3
    bower animo.js#1.0.3      ENORESTARGET No tag found that was able to satisfy 1.0.3
    
    opened by Haardt 2
  • animo.css vs animate.css v3

    animo.css vs animate.css v3

    I was going to make a pull request to a new animate.css branch so when their v3 is released, I can make a pull request back here with the synced additions.

    I while testing on CodePen, I found a few issues:

    • Your "fade & animate.css' "fadeOut" are the same.
    • appear is the same as "fadeIn"
    • spinner is unique, but IMHO should be renamed to spinRight to match their API style. I plan on a spinLeft. (maybe call pinwheelRight/Left, since objects can spin any any direction, or all at same time. Pinwheels only spin in one direction, on one plane.)
    • twirlIn & twirlOut both seem the be the same as eachother. Plus, they rotate different directions in Firefox24 vs Chrome31.

    I can fix the first 3 issues easy enough. However, I don't know what the intention of the twirl animations are to be, so I need a video or other guidance to get them to match.

    TIA

    opened by tomByrer 2
  • Fixing issue with Firefox because of backface-visibility

    Fixing issue with Firefox because of backface-visibility

    This solves an issue with Firefox which disable position: fixed;, basically setting an element with backface-visibility disable position for any element within it.

    I know, this "restore" the bug with webkit, but I do prefer that (you can still set backface-visibility on a per-element basis), because it can be fixed selectively, while the firefox issue can't be solved at all with those rules.

    See this bug: https://github.com/ThrivingKings/animo.js/issues/7

    Here is the firefox bug (which is 5 months old!): https://bugzilla.mozilla.org/show_bug.cgi?id=876341

    opened by Fire-Dragon-DoL 2
  • Added delay option

    Added delay option

    Allows you to tune your animation timings or create simple cascading animations. A typical example of how you could use this is below.

    $('h1,h2,h3,li,p', '#home').css('opacity', 0).each(function(i) {
        $(this).animo({ animation: "fadeInLeft", duration: 0.3, keep: true, delay: i*0.1 });
    });
    
    opened by braf 1
  • Make initial cleanse optional

    Make initial cleanse optional

    This in combination with Fotorama was causing bugs for me in Chrome for some reason. I still can't figure out why removing transition & transform by cleansing them even 60 seconds before initializing Fotorama caused bugs, but it did. This is probably the weirdest bug that I've ever encountered.

    In any case - an optional initial cleanse doesn't hurt. Maybe someone has set up their initial transforms & transitions for some reason, or encounters a weird chrome bug like I did.

    opened by pyronaur 1
  • Fire other things than animations

    Fire other things than animations

    Hello,

    is it possible to fire other things than animations ? For example :

    $('#demo3').animo( { animation: 'bounceInLeft', duration: 1 }, function() {
        $('#demo4').animo( { animation: 'bounceInRight', duration: 2 }, function(){
            $(this).css('display','none');
        });
    });
    

    The problem is, the css() event is fired at the same time of #demo4 animation... and not once finished..

    Thanks :)

    opened by proov 1
  • [enhancement] Add missing bower.json.

    [enhancement] Add missing bower.json.

    Hey, maintainer(s) of ThrivingKings/animo.js!

    We at VersionEye are working hard to keep up the quality of the bower's registry.

    We just finished our initial analysis of the quality of the Bower.io registry:

    7530 - registered packages, 224 of them doesnt exists anymore;

    We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

    Sadly, your library ThrivingKings/animo.js is one of them.

    Can you spare 15 minutes to help us to make Bower better?

    Just add a new file bower.json and change attributes.

    {
      "name": "ThrivingKings/animo.js",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "description": "please add it",
      "license": "Eclipse",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<dependency_name>": "<semantic_version>",
        "<dependency_name>": "<Local_folder>",
        "<dependency_name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }
    
    

    Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

    NB! Please validate your bower.json with jsonlint before commiting your updates.

    Thank you!

    Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

    opened by timgluz 1
  • Assign tags/releases to new versions?

    Assign tags/releases to new versions?

    I noticed you have different versions in your change log, but no git tags (aka Github releases). It could help to make sure users aren't downloading a bleeding-edge state and are getting a proper stable release.

    Besides that, very cool plugin and thanks for the awesome demo page!

    opened by beebs93 1
  • Backface visibility : hidden in chrome crashes background-images

    Backface visibility : hidden in chrome crashes background-images

    On chrome

    body, .animated, * {
    backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    }
    
    

    gives issues with images set as background-images on elements.

    opened by kevohagan 1
  • Trigger animation on element visible

    Trigger animation on element visible

    Hello, it seems nice, but I have to know, if there is option animate element only after it appeared on screen. Didn't check the code properly, but didn't find any function enabling it in documentation.

    something like this: function isElementInViewport(el) { var rect = el.getBoundingClientRect();

    return rect.bottom > 0 &&
        rect.right > 0 &&
        rect.left < (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */ &&
        rect.top < (window.innerHeight || document. documentElement.clientHeight) /*or $(window).height() */;
    

    }

    because I think it would be nice, because if it is not implemented, user usualy see only top animations, I created my lib, it is not so elaborated, so I was lucky to find yours, here is mine:

    https://github.com/andylaci/animate-visible

    It doesn't have callbacks, but delay does the job, you can take the best things from mine and improve yours ;)

    opened by andylacko 0
  • this.element.data(

    this.element.data("animo") is undefined

    my code $('.t1').animo({animation: "bounceIn",keep: true}) i see ths code this.element.data("animo", this.queue[0]) ->> 'this.queue[0]: bounceIn',but this.element.data("animo"),i don't know why ?That will clear my other class eg:

    <!--before-->
    <div class="win-frame t1">
           i has win-frame,t1 class 
        </div>
    <!--after -->
    <div class="bounceIn">
           i has win-frame,t1 class 
        </div>
    

    my other class are clear. I can not see the intention of the code this.element.data("animo"),that is in cleanse function,can not find this value,i try $(x).attr('data-x') ,but same as undefined.

    opened by yyman001 0
  • Background elements aren't blured

    Background elements aren't blured

    Is it possible to blur the background element specified through css?

    .some-div {background: url (some-image.jpg)}
    
    $ ('. some-div'). animo ("blur");
    

    Background aren't blur. Borders aren't blurred too. Because of it is impossible to make blur the whole page, for example under the modal window.

    opened by igor-tv 0
  • timing parameter for 'rotate' function

    timing parameter for 'rotate' function

    I have used it for my "wheel of fortune" animation: $('.wheel').animo('rotate', { degrees : degrees, duration : 4.5, timing : 'cubic-bezier(0,0,.26,1)' });

    opened by rubysta 0
  • Viewport Support Problem

    Viewport Support Problem

    If I use Viewport Meta to restrict the window width or the dpi,such like

    <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
    

    the browser's width will not be changed, then it will be change according to the viewport suddenly I think it was a big problem using the library on the mobile.

    opened by lujiajing1126 0
Releases(1.0.3)
Owner
Daniel Raftery
Daniel Raftery
CSS animations engine

Animatic With Animatic it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate realistic objects!

Yehor Lvivski 1.4k Nov 20, 2022
Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Connor Atherton 10.2k Jan 4, 2023
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

null 17.7k Jan 8, 2023
JSS is an authoring tool for CSS which uses JavaScript as a host language.

JSS A lib for generating Style Sheets with JavaScript. For documentation see our docs. Backers Support us with a monthly donation and help us continue

JSS 6.9k Dec 31, 2022
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
A Lightweight Sass Tool Set

A Lightweight Sass Tool Set Bourbon is a library of Sass mixins and functions that are designed to make you a more efficient style sheet author. It is

thoughtbot, inc. 9.1k Dec 30, 2022
A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

Roman Nurik 21 Oct 9, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022