{"action":"created","issue":{"url":"https://api.github.com/repos/luruke/barba.js/issues/38","repository_url":"https://api.github.com/repos/luruke/barba.js","labels_url":"https://api.github.com/repos/luruke/barba.js/issues/38/labels{/name}","comments_url":"https://api.github.com/repos/luruke/barba.js/issues/38/comments","events_url":"https://api.github.com/repos/luruke/barba.js/issues/38/events","html_url":"https://github.com/luruke/barba.js/issues/38","id":162779393,"number":38,"title":"Exemple animation don't triggers correctly","user":{"login":"arnaud-xp","id":1863295,"avatar_url":"https://avatars.githubusercontent.com/u/1863295?v=3","gravatar_id":"","url":"https://api.github.com/users/arnaud-xp","html_url":"https://github.com/arnaud-xp","followers_url":"https://api.github.com/users/arnaud-xp/followers","following_url":"https://api.github.com/users/arnaud-xp/following{/other_user}","gists_url":"https://api.github.com/users/arnaud-xp/gists{/gist_id}","starred_url":"https://api.github.com/users/arnaud-xp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arnaud-xp/subscriptions","organizations_url":"https://api.github.com/users/arnaud-xp/orgs","repos_url":"https://api.github.com/users/arnaud-xp/repos","events_url":"https://api.github.com/users/arnaud-xp/events{/privacy}","received_events_url":"https://api.github.com/users/arnaud-xp/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-06-28T20:28:13Z","updated_at":"2016-06-28T20:36:07Z","closed_at":null,"body":"Hi there !\r\n\r\nI'm currently using Barba.js to build my new website (possibly a future exemple to showcase I hope :) ) but I'm struggling using it.\r\nI only tried to play with Transitions using the fade in/out exemple from the documentation, but there is an issue I can't solve : the fadeOut animation displays correctly (my containers slowly fades in 750ms), but the new container is displayed instantly (opacity set to \"1\") despite the use of .animate().\r\nHere is the fadeIn function I use: \r\n```js\r\nvar AwesomeTransition = Barba.BaseTransition.extend({\r\n        start: function () {\r\n            Promise\r\n                .all([\r\n                    this.newContainerLoading,\r\n                    this.fadeOut()\r\n                ])\r\n                .then(this.fadeIn.bind(this));\r\n        },\r\n        fadeIn: function () {\r\n            var _this = this;\r\n\r\n            $(this.oldContainer).hide();\r\n\r\n            $(this.newContainer).css({\r\n                opacity: 0\r\n            });\r\n            //The following animation triggers instantly\r\n            $(this.newContainer).animate({opacity: 1}, 750, function () {\r\n                _this.done();\r\n            });\r\n        },\r\n        fadeOut: function () {\r\n            return $(this.oldContainer).animate({opacity: 0}, 750).promise();\r\n        }\r\n    });\r\n```\r\n\r\nHope you guys can provide some help with this :/\r\n\r\nCheers !"},"comment":{"url":"https://api.github.com/repos/luruke/barba.js/issues/comments/229174912","html_url":"https://github.com/luruke/barba.js/issues/38#issuecomment-229174912","issue_url":"https://api.github.com/repos/luruke/barba.js/issues/38","id":229174912,"user":{"login":"luruke","id":61326,"avatar_url":"https://avatars.githubusercontent.com/u/61326?v=3","gravatar_id":"","url":"https://api.github.com/users/luruke","html_url":"https://github.com/luruke","followers_url":"https://api.github.com/users/luruke/followers","following_url":"https://api.github.com/users/luruke/following{/other_user}","gists_url":"https://api.github.com/users/luruke/gists{/gist_id}","starred_url":"https://api.github.com/users/luruke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/luruke/subscriptions","organizations_url":"https://api.github.com/users/luruke/orgs","repos_url":"https://api.github.com/users/luruke/repos","events_url":"https://api.github.com/users/luruke/events{/privacy}","received_events_url":"https://api.github.com/users/luruke/received_events","type":"User","site_admin":false},"created_at":"2016-06-28T20:36:07Z","updated_at":"2016-06-28T20:36:07Z","body":"Hi @arnaud-xp !\r\nThanks for using Barba.js!\r\n\r\n`this.newContainer` element is by default as `visibility: hidden`.\r\nYou can check the [documentation](http://barbajs.org/transition.html) for more information.\r\n\r\nSo, just changing your code to:\r\n```javascript\r\n$(this.newContainer).css({\r\n    opacity: 0,\r\n    visibility: 'visible'\r\n});\r\n```\r\n\r\nShould work :)\r\n\r\nFeel free to close the ticket if the problem is solved"}}
{"actor":{"display_login":"luruke"}}