tgdev / animate-sass Goto Github PK
View Code? Open in Web Editor NEWA Sassy version of Dan Eden's Animate.css
A Sassy version of Dan Eden's Animate.css
Building the source from the npm pacakge with sass
gives a depreciation warning:
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div(-$base-degrees, 2) or calc(-$base-degrees / 2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
6 │ 80% { -webkit-transform: translateX(0%) skewX(-$base-degrees / 2); opacity: 1; }
│ ^^^^^^^^^^^^^^^^^^
╵
node_modules/animate-sass/animations/lightspeed/_lightSpeedIn.scss 6:49 @import
node_modules/animate-sass/_animate.scss 58:9
Hi, thanks for your great repo. I've installed the package with Bower, but ran into an issue that it wasn't pulling the latest commit code.
I specifically wanted the updated _settings.scss file with the !default added in. Is that latest commit ready for production, and if so, could you tag it? \
Right now I did a workaround by installing that specific commit's hash.
Thanks!
Hello im trying to use animate-sass in my project using gulp but the _animate.scss dont compile with my entire scripts in my css task. Any trick i have to do? Thank you
Your readme file says "There is a small section at the bottom of the _animate.scss file" etc., and lists out some code.
First, this isn't true: there is no such code at the bottom of _animate.scss.
Second, this is baffling. I'm new to Sass, but I can't understand why there would be any reason to put this code into my main sass file. At most, I might put it in a separate sass file and import it into the main sass file. But why can't you just put this code in a module that's part of animate-sass?
Hi,
There is a problem in your animation prefixer which causes most animations not to play in FF and IE.
It' adds quotes to the animation-name property like this: animation-name: 'zoomIn';
It works fine in webkit but in other browsers it causes a parse error. Here is the fix:
@mixin animate-prefixer($property, $value...) {
-webkit-#{$property}:unquote($value);
-moz-#{$property}:unquote($value);
-o-#{$property}:unquote($value);
#{$property}:unquote($value);
}
please update the master code.
First of all, thank you for porting it into usable .SCSS files!
Could you provide an example based on your files, I cannot make it working.
UPDATE: It works, missed one part from your tutorial.
Hello,
You are using $use-bounce variable for multiple purpose :
It seems that cause some trouble when want to use only the attention seekers.
Mabye it should be good to separate the variables
with $use-bounce and $use-bounces
Thanks in advance
@tgdev
in your Sass _fadeInRight.scss _fadeOutRight.scss you have the
$base-distance * 2 variable instead of 100%
but the effect makes the fadeIn & fadeOut slow, very different from the original.
I had to change it to 100% again.
Can you explain why you changed it?
The only required prefix for the latest 2 versions of any modern browser are -webkit
: http://caniuse.com/#feat=css-animation
Great job on this, by the way!
Any chance of a version bump release to include recent changes? cheers
Bourbon, the simple and lightweight mixin library for Sass also implements a prefixer()
mixin. When importing this library after Bourbon, many things break. As a quick fix I can just import this library before Bourbon, but in the long run it would be best to avoid this naming collision.
In Microsoft Edge not work any effect.
Thank's for your job.
I've started receiving many deprecation warnings similar to the following:
DEPRECATION WARNING: Passing (1s,), a non-string value, to unquote() will be an error in future versions of Sass.
DEPRECATION WARNING: Passing (fadeOutLeft,), a non-string value, to unquote() will be an error in future versions of Sass.
Hello everyone,
I working on a project that has a version of animate-sass in a physical form but I try to pass that inside my node_modules with yarn them execute one task for generating all my styles but I see a problem because my re-write classes don't recognize the include sentence. How can I fix that problem?
//This is my variable content inside my _variable.scss
$use-fadeInLeft: true !default;
$use-fadeInUp: true !default;
$use-fadeInDown: true !default;
$use-fadeOutRight: true !default;
$use-flash: true !default;
//This is a part of the content inside my mobile.scss
@import "../../global/_variables";
@import '../../../../node_modules/animate-sass/_animate';
@import "../../global/_animations";
My little code that shows that problem is this one:
.fadeInLeftEffect {
@include fadeInLeft(
$duration: 2s,
$count: 1,
$delay: .5s,
$function: ease,
$fill: both
);
}
Anyone that could help me to fix this problem, please.
Instead of writing lots of configuration variables (that might be added and forgot to be removed as the project goes), why not define all animation classes using %
selectors and @extend
?
Before:
$use-fadeIn: true;
@import 'animate-sass/animate';
.some-class {
...
}
After:
@import 'animate-sass/animate';
.some-class {
@extend %animate-fadeIn; // prefix with "animate" to prevent collision
...
}
This way only animations actually used will be outputted by sass compiler.
Hi,
I'm trying to use the library to assign animation to certain classes by default, for example, I want a specific animation to be applied to all modals.
However, I'm trying to avoid the needs to add 'animate pulse' to the markup anywhere a modal is displayed. One solution to this is to @extend .animate class in my modal class, however, we all know that @extend has issues and @mixin is preferred.
Is there any existing mixing to include the .animate rules in arbitrary sass classes, if not, would you accept a PR where _base defines an animate main and .animate class in base uses this mixing?
Thanks!
Due to the missing package.json
no one is able to install this git repo directly via npm.
When using this library in conjunction with a package manager, such as Bower, I want to be able to provide configuration without modifying the code. This makes upgrading more straightforward.
Thankfully, Sass gives us a way to specify that variables have a default value: !default
. This will allow consumers to set these values before importing, and then after importing their values will not be overridden.
Please update it to animate.css v4.1.1
Generated animation-name has a zoom-effect name in quotes, and it is not work.
Sample of CSS code after I turned on ZoomIn:
.zoomIn { -webkit-animation-name: "zoomIn"; -o-animation-name: "zoomIn"; animation-name: "zoomIn"; }
and it should be without quotes:
.zoomIn { -webkit-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; }
I see that the bug is in @include animate-prefixer(animation-name, $animate-name);
. You have to change it on @include animate-prefixer(animation-name, #{$animate-name});
.
I am using Firefox 39 / Windows 7.
Hello @tgdev
Please, can you take it to npm? I would like to use it with node_modules
Hey Tom,
The version of this package on bower is quite a few behind this master branch, when you get some time would you be able to update this?
Seems it's not possible to use CSS custom properties for setting the base duration.
I've created a PR which fixes this - #33
Thanks :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.