blivesta / animsition Goto Github PK

View Code? Open in Web Editor NEW

3.8K 138.0 785.0 1.15 MB

A simple and easy jQuery plugin for CSS animated page transitions.

Home Page: http://git.blivesta.com/animsition

License: MIT License

CSS 35.62% JavaScript 32.30% HTML 32.07%

animsition's Introduction

Animsition

A simple and easy jQuery plugin for CSS animated page transitions.

Demo & Installation

http://git.blivesta.com/animsition/

Development

Install : nodejs npm gulp

$ git clone https://github.com/blivesta/animsition.git
$ cd animsition
$ git checkout -b patch-1
$ npm install && gulp

Build

$ gulp build

Build -> Watch

$ gulp

CDN

cdnjs

dist/css/animsition.css
dist/css/animsition.min.css
dist/js/animsition.js
dist/js/animsition.min.js

Contributing

To contribute to animsition, clone this repo locally and commit your code.
Please check that everything works before opening a pull-request.

Contributors

License

Released under the MIT license.

WordPress plugin

animsition's People

Contributors

Stargazers

Watchers

Forkers

savantos ideesimple amerry19 jkdreaming zaptronic waizman rodeo0880 rmarmer1 artject sandrahe yashilanka carabina controlledchaos riddimdog jy4618272 purbaphalguni ransont shohanul umarmughal alostsega naneen zenseo karimabdul ahmadawais leonidche joemonmathews gabrielmtn seanmulvenna careemg manufacturedistrict igalanga mezklador kkrieger85 ardani hughker panit hbehkamal mcquaye jonasdk munsonbh jonahstuart megankrumm knvpk ridjohansen tyidnet shgtkshruch noscripter azzoune kevoliveira compbusonline arrolin developingidea indisc biracunha vietdesign jesseshowalter juliankurtvicent bredor oasisyen seoyoochan hugoaverty maxbcode red-studio larryschirmer nowy10 homeemail leonhaft rothanachoun maggieqek aswer18400 chaiyuttochai esneyder acemaster archiman2014 dhruvraniga kdooley89 paulwooddesign rahulsimpact kimil yomigits sonukry nullnotfound suayipekmekci dejavvu jb-boss mdlorey sunri5e ahmadmilzam ghamry dreamer0810 smilesharks global01 krishna19 txd159 abulala007 roverok fliploon liangfflia dfabregas kokoko2414

animsition's Issues

Animsition stuck on loading

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?

How to make Animsition work with window.location

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

Undefined in URL

User error.

Please correct path directories in bower files

Wrong references in main property

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"
],

Displays the old page twice

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

Check if element exists on page.

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."?

Problem with url in wordpress

Hi,

Im trying to use animsition in wordpress, but I think it not work when I give the full url..

What should I do?

Start animsition when i want

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

Load external content on page + animsition ?

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?

white page-flash between page animations

I am having a white flash (like in normal page switch) between the page animations. My site has black background.
Anybody has any idea?

Add to cdnjs

https://github.com/cdnjs/cdnjs

Thanks!

Great script, thanks for sharing!

Out Page Transitions Not Working - In Page Transitions Working Fine

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

Callback for when the animation is done

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.

Loading Percentage

Hi, Thank you for this great plugin,
is there anyway to get the loading percentage in this awesome plugin?

Firefox back button issue

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

Working with Animsition and Infinite Scroll js

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){
    
  });

percentage loading

Hi!
Is possible to know the percentage of loading a page?

Anchor point's lands on wrong position

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.

How to apply transition only into a specific html block?

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!

shift from grunt to gulp

Animations stuck in Safari 8.0.3 ?

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 ?

Remove of .less and .scss in the src folder, shift to css

Update in v4.0.0

#49 #46 #45 #44 #34 #33

ToDo

Demo files

~~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

give example of in html

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

can install / use it

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?

(suggestion) Preload before the transition

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...

Apply animsition on certain pages

Hello, Is it possible to apply animsition on certain pages and not on all the pages of the website?

[HELP] how use animsition with Meta refresh

Hello,

it is possible to use animsition with the Meta refresh ?

Thanks for help
Regards,

Trigger animsition from javascript

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?

outDuration: 0 crashes animsition on Safari only

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.

click back button return blank page

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.

Problem in out transition when a tag has hashed link on same page

@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.

Fixed footer not showing after transition

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.

Support for no-js

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 ?

Animsition does not support this browser

All online demos was working, but when I install it on localhost, i get this message.

Changing the name of the repository and plug-in

Blink before next page fades in

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?

How to set Setting Page Transition for every page?

invalid

Simulate a page swipe with different fade out fade in transitions

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?

Why is there "cooker" in dependencies?

@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.

Add option to run JS code before transitions, along them, or after (pageIn)

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!

Adding a maximum loading time ?

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.

Animsition & Meteor/Iron-Router

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

middle mouse button

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 !!!

Videos don't autoplay

why page out transition is not on beforeunload event ?

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

Loading problems and iOS Safari back button issue

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.

Opacity isn't triggered

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).

blivesta / animsition Goto Github PK

animsition's Introduction

Demo & Installation

Development

CDN

Contributing

Contributors

License

WordPress plugin

animsition's People

Contributors

Stargazers

Watchers

Forkers

animsition's Issues

Wrong references in main property

ToDo

Demo files

Recommend Projects

Recommend Topics

Recommend Org