{"action":"opened","issue":{"url":"https://api.github.com/repos/defunkt/jquery-pjax/issues/508","labels_url":"https://api.github.com/repos/defunkt/jquery-pjax/issues/508/labels{/name}","comments_url":"https://api.github.com/repos/defunkt/jquery-pjax/issues/508/comments","events_url":"https://api.github.com/repos/defunkt/jquery-pjax/issues/508/events","html_url":"https://github.com/defunkt/jquery-pjax/issues/508","id":63867134,"number":508,"title":"PJAX Best practices","user":{"login":"proov","id":1095527,"avatar_url":"https://avatars.githubusercontent.com/u/1095527?v=3","gravatar_id":"","url":"https://api.github.com/users/proov","html_url":"https://github.com/proov","followers_url":"https://api.github.com/users/proov/followers","following_url":"https://api.github.com/users/proov/following{/other_user}","gists_url":"https://api.github.com/users/proov/gists{/gist_id}","starred_url":"https://api.github.com/users/proov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/proov/subscriptions","organizations_url":"https://api.github.com/users/proov/orgs","repos_url":"https://api.github.com/users/proov/repos","events_url":"https://api.github.com/users/proov/events{/privacy}","received_events_url":"https://api.github.com/users/proov/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-03-24T00:44:34Z","updated_at":"2015-03-24T00:44:34Z","closed_at":null,"body":"Hello,\r\n\r\ni tried several times to create a clean and functional app.js for my website but i think i'm doing wrong.. Here is what i want to do:\r\n\r\n- Pjax on all my website (menu links, logo link, portfolio links etc.)\r\n- Elements Animations/Transitions on page load (both dom ready load and pjax:end)\r\n- Elements Animations/Transitions on some elements links (pjax fire on animations/transition end)\r\n\r\nI am using velocity.js to manage animations/transitions effects but maybe it's a bad idea. I can do this by adding a class on body and doing this in pure CSS\r\n\r\ni tried to create my main app.js like this\r\n\r\n```javascript\r\n(function($){\r\n/**\r\n * VARS\r\n **/\r\n$pjax_container = $(\"#main\"); // And some other vars\r\n\r\n\r\n/**\r\n * FUNCTIONS\r\n **/\r\nfunction isotopeInit(){ //... }\r\nfunction homeCarousel(){ //... }\r\n\r\n/**\r\n * PJAX\r\n **/\r\n$(document).pjax(\"a.pjax\", \"#main\");\r\n$(document).on(\"pjax:start\", function(){ //... }\r\n$(document).on(\"pjax:end\", function(){\r\n   isotopeInit(){ //... }\r\n   homeCarousel(){ //... }\r\n} \r\n\r\n/**\r\n * DOM Ready\r\n **/\r\nisotopeInit(){ //... }\r\nhomeCarousel(){ //... }\r\n\r\n})(jQuery);\r\n```\r\n\r\nBut it wont cover all i want, sometimes i have some strange things... i think i'm doing the wrong way.. How do you handle all the events and animations ?\r\n\r\nMany thanks :)"}}