blivesta / animsition Goto Github PK
View Code? Open in Web Editor NEWA simple and easy jQuery plugin for CSS animated page transitions.
Home Page: http://git.blivesta.com/animsition
License: MIT License
A simple and easy jQuery plugin for CSS animated page transitions.
Home Page: http://git.blivesta.com/animsition
License: MIT License
Great plugin and it's working well, btu there are a few places that i'd like to trigger the page transition event from javascript (drop down select menus).
I can't seem to find a way to trigger the event to fire through javascript, am I missing something?
When I call the Animsition transition right after the document.ready event, it works just fine.
When I try to call the Animsition transition after loading content through an ajax call, it somehow hangs on the loading screen...
How could this happen?
Hi, it would be awesome if you could have the animation start after the preload is complete. This would be really cool for swipe effects. You could do something like youtube: you click on the link, and there is a discrete bar across the top or a nice modal. When the preload is complete you can even do a cross fade...
hi, nice to see you project, but can i ask something, i have download your animsition, but can i know how to use it for default html, because after i download it i try to see the docs package but is not appear, can i get any solutions?
Can I make an update before checking if the browser is supported to see if the element exists on page and if not give an error in console "Element selected does not exist."?
Thank you for the job! I use animsition for loading pages, it works very well.
Now, I would load the contents of my pages dynamically with jquery.load () and animsition seems to break...
An idea?
currently you have
"main": [
"dist/css/animsition.css",
"dist/css/animsition.min.css",
"dist/js/animsition.js",
"dist/js/animsition.min.js"
],
should be
"main": [
"dist/css/animsition.css",
"dist/css/animsition.min.css",
"dist/js/jquery.animsition.js",
"dist/js/jquery.animsition.min.js"
],
Whenever I click on a link with the 'linkElement' class in it, the previous page that's supposed to fade out blinks for a second after fading out then the next page starts to fade in. It looks pretty bad. Is there a known fix for this?
Hi!!
I'm start to use animsition a few day ago and is really nice!
I have a problem, can I start the animsition when I want and not only on "(document).ready" ??
I want to call the animsition when I'm in a special zone of the view.
Thanks
Hello @blivesta
In firefox when you click back button to go to previous page then page becomes blank.
To reproduce this issue open your demo http://git.blivesta.com/clickstream/ in firefox and click any other link and then click browser back button you will see that page becomes blank. This is because firefox does not trigger document ready on back button.
To fix this please add an empty unload window event somewhere in your script, something like:
window.onunload = function() {};
Please see this link http://stackoverflow.com/questions/2638292/after-travelling-back-in-firefox-history-javascript-wont-run
User error.
outDuration: 0
crashes animsition on Safari only, links simply don't appear to work, works fine in Chrome though, very freaky, set it to 1 and it's fine.
I would like to simulate a page swipe so that one page fades out left and the following page fading in right, and vise-versa is this possible?
Hey there, nice work! I think you should provide support for browsers with JS disabled. Otherwise you just end up stuck with 0 opacity. Maybe adding a js body class and use it as a prefix for .animsition ?
give some example how to include this in our .html file and also animsition github full example download set-up how to run it in html
Hey @blivesta ,
Great tool!
However, I've been unable to get Animsition work properly with Meteor & Iron-Router (using Chrome).
Initially, funneling the code/template through Iron-Router produces the "Animsition does not support this browser" console message. I set the browser-supportCheck: function() code to return 'true' to bypass this & was able to trigger some animations, but when I applied the code to two 'routes' (page-templates), I could see in the console's elements panel that the pages actually were swapped & that the correct page content was there, but neither the animation, nor the page content was visible ... and setting the z-index higher had no effect.
Do you know of anyone who has successfully combined Animsition with Meteor/Iron-Router & how they did it?
Thanks again!
Best Regards,
Randy Marmer
Hey @blivesta ,
Thanks for this great script. I am developing a wordpress plugin based on your clickstream script.
I saw that if I want to add page out transition on all pages then I need to add class "clickstream-link" on all "a" link tags.
Is there any specific reason for this ? Why did you not used onbeforeunload event ?
Is there any other way to add page out transition ?
Can you please through some light on it ?
Thanks.
Kind Regards,
Gaurav Padia
Is there a way to test if the animation is done? I have other animations on my site but dont want them to run until your plugin is done loading the body.
@blivesta, Thanks for this great script.
I have a question.
In bower.json, cooker is written as dependencies.
But I think cooker is not dependencies to use animsition.
When I run bower install animisition --save
, cooker also install, and cooker's devendencies install too.
Why is there cooker in dependencies?
Is "devDependences" better than "dependencies", isn't it?
Thanks.
Hi, Thank you for this great plugin,
is there anyway to get the loading percentage in this awesome plugin?
Hi, I found the click back button not working on some browsers, like ios safari (ios 8.1.1, not sure if other version works.) and also some browsers which run on android.
these browsers all return a blank page after click the history back button.
this is the demo issue link:
http://test.chemm.com/animsition/
your demo works okay in my iphone, that's weird.
plz advise why this issue happened.
thx.
All online demos was working, but when I install it on localhost, i get this message.
$(window).load
.options.overlay
.inDelay
and outDelay
.s
to ms
.loading
options..less
and .scss
in the src
folder, with plan to shift to css
.grunt
to gulp
or node
(npm script).https://gist.github.com/blivesta/b1a01c2a4d39bf1ea628/
https://gist.github.com/blivesta/b1a01c2a4d39bf1ea628/download
js https://github.com/blivesta/animsition/blob/v4.0.0/dist/js/jquery.animsition.js
css https://github.com/blivesta/animsition/blob/v4.0.0/dist/css/animsition.css
html(example) https://gist.github.com/blivesta/6f7a51440f3b9ec283d
@blivesta
There is one more issue. If a tag have hashed link like #top on same page then page becomes blank.
To reproduce this create a link with hashed href as per example below:
If link with #top is clicked then page become blank instead of going to position of a tag with name=top.
I am not sure what should be better idea to completely exclude a tag with hashed link or show an animation on it too.
Thanks.
Hi there,
i would love to use this great plugin for a drupal installation. The transition itself works fine but the old page displays twice. After one click, the animation begins. After fading out the old content, the page displays again followed by the url request. The new page loads followed by the choosen transition.
Are there ways to solve this?
Thank you very much
Hi,
I'm trying to use animsition in my simple touchscreen app (web based). For some reason, we don't want the url displayed in status bar when the link hovered, so I try to use onclick. The problem is when I clicked the link, sometimes it redirected to undefined page (around 7 of 10). It work nicely while using href. Example :
My Link
Is there any suggestion for this?
Thanks
It would be great to have an option to add a maximum loading time. That way users don't get stuck looking at a loading screen.
In Safari on iOS when you click the back button to go to the previous page the page appears blank. Also some pages don't load at all. The loading icon never disappears. You have to refresh for the page to load.
Hi!
I've been able to implement animsition by @blivesta on our website (www.mediabugelectronics.com). see functioning page with in transition (out transitions not working) at http://www.mediabugelectronics.com/pages/support
Is there a common reason why in transitions would work and out transitions would not?
Thanks for your help!
-Chris
Hello,
Like your library so far but allowing only animations driven by CSS is not always enough, for example on fadeOut I want to scroll page to top, how can I do this without modifying your library?
I want to be able to provide a set of functions which I need to run along animsition, maybe someone needs to run them before or even after.
Please provide such functionality.
For example add another optional parameter to options called start
or better pageOutStart
which accepts a function and will be called inside pageOut
and pass outDuration parameter or even more parameters.
This way I could pass a function that scrolls page to top like this:
$(".animsition").animsition({
pageOutStart: function(outDuration) {
$(document.body).animate({
scrollTop: 0
}, outDuration);
}
});
Thank you!
Great script, thanks for sharing!
Hi guys and girls,
Im using this plugin, and it work´s nearly flawlessly... Except for my fixed footer.
When ever the page transitions, the footer wont show, only after resizing the window will it show.
This only happens in Chrome(Mac), Firefox and safari are just fine.
Se the problem in action her:
https://www.youtube.com/watch?v=nNVbYyE6dJk&feature=youtu.be
Thanks for a great plugin.
Hi.
I try to use animsition.
The loading screen appears (and looks nice) but the opacity of .animsition
doesn't change to 1
. Why is that?
I have no console errors no other animations in place. When I set opacity to 1 everything looks fine.
And If I set opacity to 1 via devtools and try to click a link with class="animsition-link"
nothing happens. Does this need a specifc jquery version or what else could it be? Strange that I get no error whatsoever in devtools (OSX Chrome latest).
Hello,
it is possible to use animsition with the Meta refresh ?
Thanks for help
Regards,
I am having a white flash (like in normal page switch) between the page animations. My site has black background.
Anybody has any idea?
Hi there
When opening the animsition demo page on safari 8.0.3, the loading animation works, but the page afterwards appears blank. There seems to be a problem with animations and Safari, is there a fix ?
Hello guys,
First of all, thank you all for the good script.
I have 3 process pages (like a wizard) and I need to apply the page transitions inside the container element of the pages (header and footer should not flash with the postback - Like a master page).
Could you help me? I got apply the effects, however the header and footer are flashing :(
Thanks!
Hello,
I am using infinite scroll js (with behaviour set to twitter) to load in new contents on the index page. My concern is, how do I re-initiate animistion
on the new posts that are being loaded via infinite scroll? I have described in detail the page structure being followed and would appreciate it very much if anyone can kindly share a solution for the same.
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="animsition">
<header class="header"></header>
<main class="main">
<section class="main-body">
<div id="infinite-scroll">
<article class="post">
<div class="post-body">
<h2 class="post-title">
<a href="" class="nav-link" title=""></a>
<h2>
</div>
</article>
</div>
<div class="pagination">
<a href="" class="next">Load Older Items</a>
</div>
</section>
</main>
<footer class="footer"></footer>
</div>
</body>
</html>
And here is the JS,
$(".animsition").animsition({
inClass : 'fade-in',
outClass : 'fade-out',
linkElement : '.nav-link',
overlay : false
});
$(function() {
$("#infinite-scroll").infinitescroll({
navSelector: ".pagination",
nextSelector: ".next",
itemSelector: ".post",
behavior: "twitter"
},
function(newElements){
});
Hello, Is it possible to apply animsition on certain pages and not on all the pages of the website?
I'm developing a one page website, with multiple sections, which also include some links to the subpages.
The problem I have is, that since it is a single page, I'm using anchor links on subpages to get the user back where he left.
But in safari, when the user comes back from the subpage, the index page opens on the anchor link location, but the position is wrong, about 70px more to the bottom of the anchor point in html. But after the anismition load's the page, then the anchor jumps to it's place.
The weirdest part is, that this doesn't happen when you refresh the website with the anchor link inside the link like index.html#section, it happens only when you link back from subpage.
Hi!
Is possible to know the percentage of loading a page?
Hi,
Im trying to use animsition in wordpress, but I think it not work when I give the full url..
What should I do?
How to disable animsition at the middle mouse button ?!! if i am using animsition at the whole page i cant open new tab using the middle button !!!
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.