{"action":"created","issue":{"url":"https://api.github.com/repos/ef4/liquid-fire/issues/263","labels_url":"https://api.github.com/repos/ef4/liquid-fire/issues/263/labels{/name}","comments_url":"https://api.github.com/repos/ef4/liquid-fire/issues/263/comments","events_url":"https://api.github.com/repos/ef4/liquid-fire/issues/263/events","html_url":"https://github.com/ef4/liquid-fire/issues/263","id":69737772,"number":263,"title":"Animation matches of elements during a modal transition are hidden","user":{"login":"sglanzer","id":9026198,"avatar_url":"https://avatars.githubusercontent.com/u/9026198?v=3","gravatar_id":"","url":"https://api.github.com/users/sglanzer","html_url":"https://github.com/sglanzer","followers_url":"https://api.github.com/users/sglanzer/followers","following_url":"https://api.github.com/users/sglanzer/following{/other_user}","gists_url":"https://api.github.com/users/sglanzer/gists{/gist_id}","starred_url":"https://api.github.com/users/sglanzer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sglanzer/subscriptions","organizations_url":"https://api.github.com/users/sglanzer/orgs","repos_url":"https://api.github.com/users/sglanzer/repos","events_url":"https://api.github.com/users/sglanzer/events{/privacy}","received_events_url":"https://api.github.com/users/sglanzer/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-04-21T04:04:34Z","updated_at":"2015-04-22T14:50:13Z","closed_at":null,"body":"I'm working with a few more complex than average modals.  In this case I want to instantly show the modal, but animate child elements.  However, while the overlay and container instantly appear, and the pick matches the new child element correctly, the child element disappears for the duration of the animation and re-appears completely unchanged.  I feel as though I'm missing something fundamental here:\r\n\r\n```\r\nthis.transition(\r\n        this.inHelper('liquid-modal'),\r\n        this.toModal('application-search'),\r\n        this.toValue(true),\r\n        this.use('explode',\r\n            {pickNew: '.lf-overlay', use: 'default'},\r\n            {pickNew: '.lm-container', use: 'default'},\r\n            {pickNew: '.application-search__cancel', use:\r\n                function() {\r\n                    var motion = {\r\n                        translateX: 500,\r\n                        translateY: 0,\r\n                        outerWidth: this.newElement.outerWidth(),\r\n                        outerHeight: this.newElement.outerHeight()\r\n                    };\r\n\r\n                    this.newElement.css({visibility: '', color: 'red'}); // Change the color before the animation\r\n                    debugger; // Element is visible, but color change doesn't appear\r\n                    return animate(this.newElement, motion, {duration: 5000}); // Disappears for the duration, no matter what properties are being animated\r\n                }\r\n            }\r\n        )\r\n    );\r\n```\r\n\r\nI'll keep digging through the code to see if I can find the root cause, but any direction would be appreciated."},"comment":{"url":"https://api.github.com/repos/ef4/liquid-fire/issues/comments/95218604","html_url":"https://github.com/ef4/liquid-fire/issues/263#issuecomment-95218604","issue_url":"https://api.github.com/repos/ef4/liquid-fire/issues/263","id":95218604,"user":{"login":"ef4","id":319282,"avatar_url":"https://avatars.githubusercontent.com/u/319282?v=3","gravatar_id":"","url":"https://api.github.com/users/ef4","html_url":"https://github.com/ef4","followers_url":"https://api.github.com/users/ef4/followers","following_url":"https://api.github.com/users/ef4/following{/other_user}","gists_url":"https://api.github.com/users/ef4/gists{/gist_id}","starred_url":"https://api.github.com/users/ef4/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ef4/subscriptions","organizations_url":"https://api.github.com/users/ef4/orgs","repos_url":"https://api.github.com/users/ef4/repos","events_url":"https://api.github.com/users/ef4/events{/privacy}","received_events_url":"https://api.github.com/users/ef4/received_events","type":"User","site_admin":false},"created_at":"2015-04-22T14:50:13Z","updated_at":"2015-04-22T14:50:13Z","body":"I think your main problem is the z-index on the `.application-search__cancel` element. It's animating behind the modal overlay.\r\n\r\nAlso, your translateX will start it in its final position and animate it to the right 500px. If you want it to animate in instead, you can use velocity's forcefeeding by passing `translateX: [0, 500]`, meaning \"go to zero, starting at 500\".\r\n\r\nHere's an example that I tested:\r\n\r\n```js\r\n  this.transition(\r\n    this.inHelper('liquid-modal'),\r\n    this.toValue(true),\r\n    this.use('explode', {\r\n      pickNew: '.application-search__cancel',\r\n      use: function() {\r\n        var motion = {\r\n          translateX: [0, 500]\r\n        };\r\n        this.newElement.css({zIndex: 11});\r\n        return animate(this.newElement, motion, {duration: 2000});\r\n      }\r\n    })\r\n  );\r\n```"}}