minimac / magic Goto Github PK
View Code? Open in Web Editor NEWCSS3 Animations with special effects
Home Page: https://www.minimamente.com/project/magic/
License: MIT License
CSS3 Animations with special effects
Home Page: https://www.minimamente.com/project/magic/
License: MIT License
I'd like to see code to add/remove the animation in the README.
Please add this:
function magicCSS(elementId, animationName, callback) {
const node = document.getElementById(elementId);
node.classList.add("magictime", animationName);
function handleAnimationEnd() {
node.classList.remove("magictime", animationName);
node.removeEventListener("animationend", handleAnimationEnd);
if (typeof callback === "function") callback();
}
node.addEventListener("animationend", handleAnimationEnd);
}
Hi, I was testing the file on the CDN and there was an animation that wasn't work, checking the code gotten from the CDN I realized that there is a typing error in the file on some animation names.
Where it is the word "Retourn" it would be "Return" as in the file in your repo on GitHub.
I hope you can fix it.
Greetings.
Hi there, might be a stupid question, but once my animation plays once it doesn't trigger anymore.
Checking the html I see that the class that's being added to the div never gets removed.
I'm using IONIC+VUE3
Any ideas?
should ne like this:
.perspectiveUpRetourn {
backfe-visibility: visible;
-webkit-animation-name: perspectiveUpRetourn;
-moz-animation-name: perspectiveUpRetourn;
-ms-animation-name: perspectiveUpRetourn;
-o-animation-name: perspectiveUpRetourn;
animation-name: perspectiveUpRetourn;
}
instead of
.perspectiveUpRetourn backface-visibility: visible {
-webkit-animation-name: perspectiveUpRetourn;
-moz-animation-name: perspectiveUpRetourn;
-ms-animation-name: perspectiveUpRetourn;
-o-animation-name: perspectiveUpRetourn;
animation-name: perspectiveUpRetourn;
}
Something worng with your compilation scripts as we have this:
60% {
opacity: 1;
-webkit-transform-origin: NaN%;
-moz-transform-origin: NaN%;
-ms-transform-origin: NaN%;
-o-transform-origin: NaN%;
transform-origin: NaN%;
Please put the file sizes (min, etc..) in the README.
Hi Thanks for you lib
I'm trying to play with it quite simply
The link should slide the Title out of the page , if I'm not mistaken
I included the link in the head
but nothing works ?
any idea ?
when I tried to implement
$ npm install @minimac/[email protected]
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@minimac%2fmagic.css - Not found
npm ERR! 404
npm ERR! 404 '@minimac/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
[ng] ERROR in ./src/global.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/global.scss)
[ng] Module build failed (from ./node_modules/postcss-loader/src/index.js):
[ng] Error: Failed to find 'magic.css/magic.min.css'
[ng] in [
[ng] /home/my_user/MyApP/src
[ng] ]
[ng] at resolveModule.catch.catch (/home/my_user/MyApP/node_modules/postcss-import/lib/resolve-id.js:35:13)
I'm following the tutorial of https://devdactic.com/5-animation-packages-ionic/ and I cannot use this library now, how could i use it? Thank you so much
Regards
Hi,
i really love this project but i'm wondering if the performance could reach 60fps using First Last Invert Plays technics.
I tried to do this but the rendering is not good with FLIP technic (try in chrome or ES6 browser compliant) :
`
<html>
<head>
<link crossorigin="anonymous" href="/node_modules/magic/magic.min.css"i media="all" rel="stylesheet" />
<script crossorigin="anonymous" src="/node_modules/FLIP/dist/flip.js"></script>
<script crossorigin="anonymous" src="/node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
open the chrome debug and compare FPS
<br />
<div id="flip" class="magictime"><img src="http://static.euronews.com/articles/351188/368x207_351188.jpg"/></div>
<br/>
<div id="std" class="magictime"><img src="http://static.euronews.com/articles/351188/368x207_351188.jpg"/></div>
<script>
let elFlip = document.querySelector('#flip');
elFlip.onclick = () => {
let flip = new FLIP({
element: elFlip,
duration: 2000
});
flip.first();
flip.last('puffIn');
flip.invert();
flip.play();
flip.removeClass('puffIn');
};
$('#std').click(function () {
$(this).addClass('puffIn');
});
</script>
</body>
</html>
`
Hey, I just realized that the Stylus file is not in sync with the CSS.
Is the current magic.styl generated automatically?
Cheers, Philip
Hi, could you submit your package to bower please?
Thx!
@jrutheiser could you update magic style according to the new magic.css?
Thanks!
Hey,
Thank's to you for the great job. It works perfectly on < img >, I tried to use the effet on a < tr >, for example to delete one with a fancy effect but nothing happens.
Is it possible or not?
Regards
Thank you very much for so beautiful effects. It would be great to have browser compatibility published in the README file since we will have to care about users with outdated ones.
I don't actually need all animations in package. I loved only two of them ;) Since I try to minimize the size of the content, delivered to an end-user, I would like to be able to easily import only animation I selected into my CSS.
magic.min.css can be then built by Grunt/Gulp from independent pieces.
Hi, my AV software (ESET Nod32 ) yells at me when I try to go to your demo-site (https://minimamente.com/example/magic_animations/)
This web page contains potentially dangerous content.
Threat: HTML/ScrInject.B trojan
Maybe something you want to look into.
Cheers
None of the examples worked on IE9 :( when I tried
I'm using a vanishIn via addClass and got a notice from a user which looks like as if the animation won't start/proceed:
http://i.imgur.com/fIZxmHZ.png
Chrome 27 on Chrome OS
respective url: https://www.postagon.com/signup
Never experienced that a CSS animation would just stuck right at the beginning. Any hints?
Thanks
海先生,18067542312,找外快
Hey, I recently added all the animations from magic to my fork of animate.css, called animate-stylus. So, I was wondering if you'd be interested in pulling in the work that I did over there.
Here's what this hypothetical PR would do:
Add all the animations from animate.css
Break up the Stylus into separate files so you can either include the entire library (like you do now) or include individual animations or include individual folders of animations with globbing.
Also, it's much easier to track changes in git when you have files broken up nicely.
Remove the nonsemantic "name of animation" classes because they state the style (which is the job of CSS), rather than describing what the element is. Your HTML is for content, and your CSS is for style - thus, class names (a feature of HTML) should describe the content, not the style. But also add a short note in the readme that tells how to get them back.
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 miniMAC/magic
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": "miniMAC/magic",
"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!
I have yet to do anything with JavaScript Interop, but this would great for my black game to slide the cards in instead of just having them appear.
Bonus Question: Is there a Nuget way to install this? I only use Nuget, I uninstalled something that put NPM on my computer because I didn't like it.
Thanks
hi,
i used this magictime in my project, nice effects, but i have added the condition with jquery which is below but less 10 records display fine, but more than 20 records hangs the browser for 1 sec or 2 sec and then effects also not work properly.
$('.letters').click(function(e) {
var filter = $(this).attr('id');
if (filter == "all")
{
$('#filter div').each(function(){
$(this).removeClass('magictime puffIn').hide();
});
$('#filter div').each(function(){
$(this).addClass('magictime puffIn').show();
});
/* $('#filter div').hide().removeClass('magictime puffIn');
$('#filter div').addClass('magictime puffIn').show();*/
} else {
$('#filter .col-md-3:not(.' + filter + ')').removeClass('magictime puffIn').hide();
$('#filter .'+filter).show().addClass('magictime puffIn');
}
});
Hi,
this is so cool, is there a way to integrate with AngularJs
thanks in advanced.
I noticed some animations were missing from the Bower install. When I try to update it's pulling v1.0.0 and bower info magic
returns version: '1.0.0'
but it seems the last commit is a version bump to v1.1.0. Has the Git tag been updated?
This CSS is so handy - I have used it on several sites in conjunction with jquery.inview. Whenever a client says, "I want some sort of animation" I throw this on there and they like it.
Small question: Would you mind creating a "release" for 1.2.0 in Releases, please?
No worries and thanks you!
Hi, I created a PostCSS Plugin based in your project.
thank you!
Hello, great script, thank you. This is more Q then issue: i wonder is there way to show effect with delay on every child in div which content is part of for..each with same class name. (like showing one by one effect). Regards and again great work.
http://caniuse.com/#feat=css-animation
-ms- was for only IE10 beta; prefixes for this & others dropped when IE10 released.
-o- was only for desktop v12.
-moz- dropped v16.
I wish you kept up the magic.styl.
in the dist folder, magic.css is 70K but magic.min.css is 280K due to sourcemap
the
backface-visibility: hidden;
property set on the body prevent the
position: fixed;
property to work on firefox.
I add classes using javascript onclick but animation not playing?
can anyone give me a suggestion on how to check animation work or not?
When we apply an animation, lets suppose it is "slideLeft"; it moves to a far left side. Is there a way using library that we can animate it back to its initial position?
c8cb726 didn't fix it... not sure where the demo page is, but it isn't in gh-pages
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.