{"action":"closed","issue":{"url":"https://api.github.com/repos/thenikso/angular-inview/issues/67","labels_url":"https://api.github.com/repos/thenikso/angular-inview/issues/67/labels{/name}","comments_url":"https://api.github.com/repos/thenikso/angular-inview/issues/67/comments","events_url":"https://api.github.com/repos/thenikso/angular-inview/issues/67/events","html_url":"https://github.com/thenikso/angular-inview/issues/67","id":103576502,"number":67,"title":"InView event not triggered when a parent element is in an animation.","user":{"login":"SNiels","id":3382717,"avatar_url":"https://avatars.githubusercontent.com/u/3382717?v=3","gravatar_id":"","url":"https://api.github.com/users/SNiels","html_url":"https://github.com/SNiels","followers_url":"https://api.github.com/users/SNiels/followers","following_url":"https://api.github.com/users/SNiels/following{/other_user}","gists_url":"https://api.github.com/users/SNiels/gists{/gist_id}","starred_url":"https://api.github.com/users/SNiels/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SNiels/subscriptions","organizations_url":"https://api.github.com/users/SNiels/orgs","repos_url":"https://api.github.com/users/SNiels/repos","events_url":"https://api.github.com/users/SNiels/events{/privacy}","received_events_url":"https://api.github.com/users/SNiels/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-27T19:19:05Z","updated_at":"2015-08-27T23:40:09Z","closed_at":"2015-08-27T23:40:09Z","body":"First off, great plugin!\r\nI use the in-view event to animate in elements the moment they enter the viewport.\r\nNow that I've added routing animations, they only appear after scrolling.\r\n```css\r\n/* Default view */\r\n.view{\r\n  width: 100%;\r\n  transition: 300ms;\r\n}\r\n/* First animation*/\r\n.resumeAnimation .view.ng-enter{\r\n  transform: translateX(-100%);\r\n}\r\n.resumeAnimation .view.ng-enter.ng-enter-active{\r\n  transform: translateX(0%);\r\n}\r\n.resumeAnimation .view.ng-leave{\r\n  transform: translateX(0%);\r\n}\r\n.resumeAnimation .view.ng-leave.ng-leave-active{\r\n  transform: translateX(100%);\r\n}\r\n/* Second animation*/\r\n.projectsAnimation .view.ng-enter{\r\n  transform: translateX(100%);\r\n}\r\n.projectsAnimation .view.ng-enter.ng-enter-active{\r\n  transform: translateX(0%);\r\n}\r\n.projectsAnimation .view.ng-leave{\r\n  transform: translateX(0%);\r\n}\r\n.projectsAnimation .view.ng-leave.ng-leave-active{\r\n  transform: translateX(-100%);\r\n}\r\n```\r\nI have a small workaround, I force the browser to scroll at least 2 pixels when the user changes route. Though, I don't really like this workaround. Is there a way for to force the elements to check if they are visible? So I can call that after the animation has been run?\r\n```js\r\n$rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){\r\n\t\t    $rootScope.animation = currRoute.animation;\r\n            if($document.scrollTop()==0){\r\n                $document.scrollTo(0,2,800);\r\n            }else{\r\n                $document.scrollTo(0,0,800);\r\n            }\r\n\t  });\r\n```\r\n\r\nYou can find out the project at https://github.com/SNiels/portfolio"}}