geoffgraham / animate.scss

Sass mixins based on Dan Eden's Animate.css

The WordPress theme for my personal site.

animate.scss's Issues

$count parameter doesn't seem to be in the _properties file

Also, some animations it says does not $count. The example on the readme doesn't work due to this.

.your-class-name {
  @include bounceIn(
    $duration: 1s,
    $count: 2,
    $delay: .2s,
    $function: ease, 
    $fill: both
  );
}

Add support for Eyeglass

Would you please consider adding support for Eyeglass? https://github.com/sass-eyeglass/eyeglass

File to import not found or unreadable: _properties.

I got the error when run sass to compile animate.scss, there can not found _properties file but I checked there still has that file in the animate package folder.

Running "gulp:css" (gulp) task
Error in plugin 'sass'
Message:
src/scss/all.scss
Error: File to import not found or unreadable: _properties.
Parent style sheet: /Users/***/src/scss/all.scss
on line 881 of src/scss/all.scss
@import
^

Are there anyone got the same error?

How to use with JQuery

Hi there,

I have been using the Animate.css for a while now. I decided to give a try to this library Animate.scss but after compiling and trying to do this:
$('#triggerElement').on('click', function () {
$('#my-element').addClass('animated bounce');
});

it doesn't work. is there a reason why? do I really have to go and create another class and include a animation mixin to be able to animate an element via JQuery?

New variable in animation mixins

Thank you for such a wonderful library, I hope that it will be supported in the future. Please add new variable for controling Y in slideOutUp mixin http://prntscr.com/ayy87d or how i can set it more clear in my project?

#30

Flagging this up again as I think I found out whey $count wasn't working
#30

Bower package not updated

Hi!
Thanks for this scss port of Animate.css!
If I do "bower install animate.css-scss", I get a package without some animations (zoomIn, for example).

Thanks.

Pass params in animation functions

Hi, thanks for your library I use it on several projects, it is already a big improvement compare to the CSS version.
I would want to go further and be able to customize animation functions. (https://www.sitepoint.com/using-sass-maps/#module-configuration)
Something like this (not tested though):

// in animate.scss files
@include keyframes(fadeInRightBig, $options: ()) {
    $configuration: map-merge((
        tx: 2000px,
    ), $options);
    0% {
        opacity: 0;
        @include transform(translateX(map-get($configuration, tx)));
    }
    100% {
        opacity: 1;
        @include transform(translateX(0));
    }
}
// in user scss file
.description {
    @include fadeInRightBig($duration: 1s, /* any other params, then the options to be forward to the animation itself */ $options: (tx: 100%));
}

For now I override the animation locally like the following but it feels wrong because it overrides the function for every later uses

// in user scss file
@include keyframes(fadeInRightBig) {
    0% {
        opacity: 0;
        @include transform(translateX(100%));
    }
    100% {
        opacity: 1;
        @include transform(translateX(0));
    }
}
.description {
    @include fadeInRightBig($duration: 1s);
}

What do you think ?

Sliders

Hi there!
Thanks for your work in porting this to SCSS and creating the mixins.

Is there a reason why the Sliders have not been included in your port?

Regards

Martin

Add zoom in/out animations

It looks like the zoom in/out animations were added to animate.css but aren't in this library yet, any chance of adding them?

Webkit specific vendor prefixes

There are webkit specific vendor prefixes in the bouncing entrance/exit mixins. These need to be removed. Could well be elsewhere. This means project does not work on any non-webkit based browser for these animations.

Please update it to animate.css v4.1.1

Please update it to animate.css v4.1.1

[Chrome 74] @media(prefers-reduced-motion) rule

Would you mind to update to the latest animate.css release?
This bug became very problematic: animate-css/animate.css#932

Update Bower

Bower install only saves version 3.1.0 and some animations are missing like slide sliding exit

Seems to be compiling huge css files

I figured it should probably just import dynamically, so that only @included options are compiled into the final .css file via sass --watch. However it seems to import all classes by default. Am I doing something wrong? I am importing the default animate.scss at the rootpath as documented. Adds 400kb to my build! But the final @import in your chain is importing the partials so I'm a bit confused.

whats the difference between this and hmps/animate.scss?

@geoffgraham https://medium.com/p/92ae78c7c673 say Only the parts that you include via mixin will end up in your actual CSS so there is no unnecessary bloating of your codebase and you don’t have to make any extra requests to load a stylesheet.

is it the same case with your animate.scss?

https://github.com/hmps/animate.scss

Remove the normal .css file from root

If I am using gulp-sass and adding the path ./bower_components/animatewithsass to the includePaths and then requiring the animate.scss via @import 'animate'; I get the following error:

Error: It's not clear which file to import for '@import "animate"'.
       Candidates:
         animate.scss
         animate.css
       Please delete or rename all but one of these files.
        on line 13 of stdin
>> @import 'animate';

To be clear, it should be possible to just use @import 'animate.scss'; here, but this is against my .scss-lint.yml linters. (That's not the reason I want it to be removed, but why would someone install animate.scss, when he really wants the css. So the .css file is unncessary, right?

Some partials have no defaults set

Trying to use fadeIn, but it kept asking for duration, delay, function & fill-mode. Is that what the properties partial is for? I'm using libsass by the way.

Wrong bower name?

animate.css-scss refers to a package by Igosuki.

Your package is called animatewithsass according to the bower registry.

Am I wrong?

dependencies Missing?

slideInDownBig wrong prefix

Hi Geoff,

First off thank you for this excellent library. It has saved me a load of time!

I am just letting you know that In the file _fadeInDownBig.scss

you have set the transform prefix to -webkit-transform instead of just transform like the other animations use.

removing the -webkit- prefix fixes the issue on none webkit browsers of coarse:)

Thanks again!

Jack

Call animations by a class name

Is there a way to call animations by using classes on the HTML, as animate.css works now.

EG, another file which links everything up.

.bounce {
  @include bounce();
}
.flash {
  @include flash();
}
.pulse {
  @include pulse();
}

So in the HTML I can have:

<div class="animate bounce">
Some Content
</div>

Obviously this method would just use the defaults as there would be no way to change animation parameters in the HTML.

Slide in down

Hi there,
I used your mixin for the slideindown animation, however what CSS do I have to set for the element to start from a 0 height?

Add versions

Hi, could you please add versions to the files (description in animate.scss) and for example tags on github repository? This way it is easier to track changes and update files in the future in projects. Thank you.

Bump NPM version

Current version 3.2.2
NPM version 3.2.1
https://www.npmjs.com/package/animatewithsass

Suggested: to make importing a little easier

Suggested an approach like on this version:
https://github.com/tgdev/animate-sass

With an option to override and import just a specific file from an initial config.
I might see if I can implement and do a pull request.

Missing animations

It seems the bower repository is missing some animation.
Animate.scss contains zoom and other animations which are not on the bower installed version.

implement .infinite and .hinge classes

Could you please include these classes in scss?

In this way one could use for example: @extend .infinite; to implement this functionality in scss.

Currently the only way to make animations infinited is to copy/paste class from original animate.css.

npm support

Hey, I'm sure there is a reason, but thought I'd just ask and see if you had any plans to add this to the npm packages?

Jack in the Box Animation not included

As indicated in the title, Jack in the Box animation from Animate.CSS is not included.

Add Jello animation

https://github.com/daneden/animate.css/releases/tag/3.3.0

A few more customizations

I realize this is a large request, but i find at times i wan't to apply custom transform values on a case-by-case basis. 2000px offsets makes things very cumbersome, and at other times a 100% value just doesn't work with some components. I would love to be able to pass in a custom distance, while still using the animation name... not sure if thats possible.

Doesn't compile correctly

1). Use of comma's in animate.scss causes errors.
2). Same goes with all other files that use comma's for imports.
3). After that is all fixed, it compiles but $animation-name doesn't work.

// $animation-name should be replaced by bounce or whatever
Example:
@-webkit-keyframes $animation-name {
about:blank
0%, 50%, 100% {
opacity: 1; }
25%, 75% {
opacity: 0; } }

Other then that I really like this repo it's easy to understand and i've used it for other keyframe animations.

How to handle vendor prefixes?

I've gone back and forth on how to handle vendor prefixes here. In the past week, I've made a commit that removed them entirely, then went back and merged a pull request that elegantly put them back in with mixins.

The question is (1) whether we're all cool with mixins as a means for handling vendor prefixes or (2) whether there is another preferred method?

I'm asking the question out in the open because the intent of this is to keep things as unobtrusive as possible. By that, I mean anyone should be able to drop this into their project and have it work. To illustrate that point, I personally prefer using Grunt/Autoprefixer to handle prefixing but know that would require making choices that have an impact on other people's projects and I'd hate for that to happen.

Either way, I'll put it out there. Just want some healthy dialogue and nothing else. :)

Cheers!
Geoff