Apologies, The Future, and More

[daneden]

Hi everyone,

I just wanted to write a short post to say a few things. First of all, a great big thank you for all the support Animate.css has garnered here on GitHub! The project has come a long way.

Next, an apology. The issues and pull requests for this repo have a tendency to build up – something I’m not proud of. However, open source is hard. Real hard. I do my best, and I hope that’s enough for you guys!

Now, on to the exciting stuff – the future. I’ll soon be starting an internship at Dropbox, meaning what little time I do have to spend working on Animate.css is going to get cut even shorter. I apologise in advance for this. However, I plan to do some things differently.

First of all, I want to set up Animate.css on GitHub Pages. By doing this, I can have the wonderful folks here on GitHub maintaining the promo page for me just as much as the code itself is maintained. Currently, http://daneden.me/animate is essentially a completely separate codebase – every time Animate.css on GitHub is updated, I have to go back into my server and manually update the files. This sucks, and I know it. Using GitHub pages will mean that custom builds can (theoretically) be assembled directly from the GitHub source. Woohoo! Less manual work, more automatic awesome.

Now, I don’t even know where to start with the GitHub-based custom build stuff, so I’ll need your help. Yes, you. Whether that’s doing all the hard work for me, or just giving me some tips. I don’t really mind; I’m just letting you guys know my long-term plan.

Second, I’ll be looking into getting some collaborators on board. If that’s you, let me know, and I’ll think about inviting you. Even just a second pair of hands to help with the issue management would be great.

That’s just about it. Please let me know how you folks feel about these changes, and let’s keep making Animate.css the easiest way to add app-like animations to your websites and web apps.

[jdhobbsuk]

I started a bolt-on to AnimateSCSS called "Continuous"...my plan is to add a series of common continuous animations.

I also did some variants of the FlipIn 's where they were smooth instead of a "wobble stop"

[craigcoles]

I am more than happy to become a collaborator and help out chap :smile:

[michaelw90]

I'm happy to host the animate.css site - if you want, and keep it updated. But a move to GitHub Pages might be the best solution. :) Offer's there, you know where I am if you need bacon (or help).

[ghost]

I'll help you out! Anything you need my friend.

[derekr]

I'm down to help out. I have experience with github pages and can tackle issues. :boom:

I also am in to automating build targets for this project making it easier to publish to various package managers in addition to bower.

[codedependant]

I'm super keen to contribute. Maybe you could add a contributors guideline to the readme and a set of changes you'd like to see made.

[manikrathee]

@daneden I would love to help out and manage/setup the github page.

[RadLikeWhoa]

I'd be glad to help out, especially with tackling the issues, but I'm pretty sure I could offer a helping hand with the gh-pages stuff as well. :)

[pwoldberg]

Use http://rawgithub.com/daneden/animate.css/master/animate.css for the css url on your page to have it always use the latest github version.

[Ahrengot]

I'd like to help as well.

Specifically, I'd like to build out a Compass/SASS version. Like a lot of people, I use SASS, and for most projects I include animate.css (I just drop the content of the css file into an empty _animate.scss file).

However that's quite ugly compared to my other SASS code and the ≈ 1000 lines of code could be optimized a lot with the CSS3 mixins in compass and the other clever functions in SASS.

On top of that it would be cool with some mixins like @include animation(wiggle, 0.75s, ease-out); which I right now have to write the following code to make happen

.some-class {
    @extend .wiggle;
    @include experimental(animation-duration, 0.75s);
    @include experimental(animation-timing-function, ease-out);
}

[flipactual]

A few thoughts regarding animate.css and Sass:

Since I don't want to pollute my markup with presentational classes, in @Ahrengot's case .wiggle, I would turn all the animate.css classes into placeholder selectors once they're in a Sass or SCSS file.

If you then did need one of the presentational classes, you could enable with the following:

.wiggle {
  @extend %wiggle;
}

Similarly, since there are so few options for animation-timing-function, they would be a great fit for placeholder selectors as well.

This would keep the animation.css classes out of your compiled CSS entirely and eliminate a mixin call for each animated element.

Of course taking a similar approach to the animation-duration is problematic as you may have case to use any given value.

Using an all in one mixin as suggested also seems troublesome. If you had all the animate.css classes or had them as placeholder classes, you would have to pass the actual class name through the mixin and not the animation name because Sass fails on Ruby interpolation when the call is not proceeded by whitespace. Per example:

@mixin animate($name) {
  @extend .$name; // doesn't work
  @extend .#{name}; // also doesn't work
}

Furthermore, SCSS does not facilitate switch statements. You can see how messy this would get.

I'd love to see the community take animate.css in a Sassy direction, but all of the attempts I've seen thus far have fallen short(for me personally - no offense intended, you're all amazing, kick ass developers and humans).

I guess the real question, after all this ranting, is @daneden do you want to explore the option of an official Sass version of animate.css? While making it more useful for many of us, it would also make it much easier to contribute to. Either way...

[cyrushenderson]

@codefendant great idea

[codedependant]

@Ahrengot @flipstewart I agree, a SASS version would be great. @adamstac has already done some awesome work around this with https://github.com/adamstac/animate.sass. Maybe @daneden & @adamstac would be up for merging that into this project?

[flipactual]

@codefendant my primary complaint with that Sass port is that it is dependent on Compass. There's really no reason for animate.css to have any dependencies.

[Ahrengot]

@flipstewart I disagree. The vast majority of SASS users has some kind of CSS3 mixin solution. The most popular being compass and bourbon. Writing a whole new set of CSS3 crossbrowser/prefix mixins just for animate.css seems like it would add a bunch of clutter to the majority of projects in favor of the minority who, for whatever reason, might choose not to use a CSS3 prefix thing.

Ceaser CSS Easing relies on Compass. They're doing something in the same ballpark and, as a developer, I would always prefer that they rely on an industry standard instead of rolling their own mixins that might conflict with the ones provided by Compass already.

[adamstac]

Dependency free is a trend.

What you'll end up doing is recreating the wheel (copy and paste from Compass) or waste time making it yourself.

[polikin]

Hey guys, this is a modified version of animate.sass. You only need to import the main .scss file, then call the animation with an include. https://github.com/polikin/animate.sass

[Ahrengot]

Awesome work @polikin! I love how you just include the animations you need!

What's the reasoning behind namespacing the animation names? I.e. fading-entrances/fadeInLeft instead of just fadeInLeft. Since all animation names are unique it feels like this adds a lot of extra, unnecessary, typing for us devs.

[polikin]

Personally I like to know the "main category" of the animations as a reference, but I can fix the code if I'm the only one who like it. :P

[polikin]

Thx @Ahrengot. I'm still waiting for my pull request to be accepted, but you can use it already with my repo.

[daneden]

Thanks for the tremendous support, everyone. I finally got a chance to work on some of the high-level problems with Animate.css. Details in #115. Closing this and moving forward.

[SeeThruHead]

Hi guys, Love this library Danedan! thanks alot I'm trying to create my own scss version that uses placeholder selectors and mixins so that it only imports the code you need and dupliactes as little css when compiled. I'm not sure that it even works 100% yet. Or whether I'm doing some things efficiently or not. (I just started learning web development recently), If anyone has time to look it over its here https://github.com/SeeThruHead/_animate.scss I would appreciate it.