{"action":"created","issue":{"url":"https://api.github.com/repos/jeremyckahn/rekapi/issues/43","repository_url":"https://api.github.com/repos/jeremyckahn/rekapi","labels_url":"https://api.github.com/repos/jeremyckahn/rekapi/issues/43/labels{/name}","comments_url":"https://api.github.com/repos/jeremyckahn/rekapi/issues/43/comments","events_url":"https://api.github.com/repos/jeremyckahn/rekapi/issues/43/events","html_url":"https://github.com/jeremyckahn/rekapi/issues/43","id":132609636,"number":43,"title":"Name option in toString sets selector for every actor to same thing","user":{"login":"jeremiahmmv2","id":2732978,"avatar_url":"https://avatars.githubusercontent.com/u/2732978?v=3","gravatar_id":"","url":"https://api.github.com/users/jeremiahmmv2","html_url":"https://github.com/jeremiahmmv2","followers_url":"https://api.github.com/users/jeremiahmmv2/followers","following_url":"https://api.github.com/users/jeremiahmmv2/following{/other_user}","gists_url":"https://api.github.com/users/jeremiahmmv2/gists{/gist_id}","starred_url":"https://api.github.com/users/jeremiahmmv2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeremiahmmv2/subscriptions","organizations_url":"https://api.github.com/users/jeremiahmmv2/orgs","repos_url":"https://api.github.com/users/jeremiahmmv2/repos","events_url":"https://api.github.com/users/jeremiahmmv2/events{/privacy}","received_events_url":"https://api.github.com/users/jeremiahmmv2/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2016-02-10T05:21:59Z","updated_at":"2016-02-10T22:53:30Z","closed_at":null,"body":"I'll try to keep this short...\r\n\r\nImagine you have multiple Rekapi instances that are created on separate pages and the CSS is exported from both with `toString()`. They both have multiple actors with the name/class actor-1, actor-2, etc. Then say the CSS from both instances are needed on the same page. The `.actor-1` animations would clash.\r\n\r\nAs a solution, one might use the `name` option in `toString()`. But if I use `toString({name: 'test'})`, on a single stage with multiple actors, the CSS for ALL actors uses the `.test` selector.\r\n\r\nAs a workaround, I can add a single actor and generate the CSS with `toString({name: uniqueClassName})` and immediately remove the actor and simply do this for all the actors.\r\n\r\nIt would be nice if I could either A) set the class of an actor with a `setActorClassName()` method or a `prefix` or `parentId` option in `toString()`.\r\n\r\nThat way I could do something like this:\r\n```javascript\r\nvar prefix = 'abc123-';\r\nrekapi.renderer.toString({prefix: prefix});\r\n```\r\nAnd get a result like:\r\n```css\r\n/* Stage 1 */\r\n.abc123-actor-1{\r\n ...\r\n}\r\n.abc123-actor-2{\r\n ...\r\n}\r\n/* Stage 2 */\r\n.abc567-actor-1{\r\n ...\r\n}\r\n.abc567-actor-2{\r\n ...\r\n}\r\n```\r\n\r\nOr:\r\n\r\n```javascript\r\nvar parentId = 'abc123';\r\nrekapi.renderer.toString({parentId: parentId});\r\n```\r\n\r\nAnd get a result like:\r\n```css\r\n/* Stage 1 */\r\n#abc123 .actor-1{\r\n ...\r\n}\r\n#abc123 .actor-2{\r\n ...\r\n}\r\n/* Stage 2 */\r\n#abc567 .actor-1{\r\n ...\r\n}\r\n#abc567 .actor-2{\r\n ...\r\n}\r\n```\r\n\r\nOr just let me know if I'm missing something obvious...\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/jeremyckahn/rekapi/issues/comments/182619408","html_url":"https://github.com/jeremyckahn/rekapi/issues/43#issuecomment-182619408","issue_url":"https://api.github.com/repos/jeremyckahn/rekapi/issues/43","id":182619408,"user":{"login":"jeremiahmmv2","id":2732978,"avatar_url":"https://avatars.githubusercontent.com/u/2732978?v=3","gravatar_id":"","url":"https://api.github.com/users/jeremiahmmv2","html_url":"https://github.com/jeremiahmmv2","followers_url":"https://api.github.com/users/jeremiahmmv2/followers","following_url":"https://api.github.com/users/jeremiahmmv2/following{/other_user}","gists_url":"https://api.github.com/users/jeremiahmmv2/gists{/gist_id}","starred_url":"https://api.github.com/users/jeremiahmmv2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeremiahmmv2/subscriptions","organizations_url":"https://api.github.com/users/jeremiahmmv2/orgs","repos_url":"https://api.github.com/users/jeremiahmmv2/repos","events_url":"https://api.github.com/users/jeremiahmmv2/events{/privacy}","received_events_url":"https://api.github.com/users/jeremiahmmv2/received_events","type":"User","site_admin":false},"created_at":"2016-02-10T22:53:30Z","updated_at":"2016-02-10T22:53:30Z","body":"I decided to use the catimate demo to show the problem I'm having with the name option. There may be something fundamental I'm not understanding. Here are the parts of catimate I altered:\r\n\r\n```html\r\n  <div id=\"actor-container\">\r\n    <img id=\"actor\" src=\"img/octocat.png\">\r\n    <!-- Added second octocat -->\r\n    <img id=\"actor2\" src=\"img/octocat.png\">\r\n  </div>\r\n```\r\n\r\n```javascript\r\n    require.config({\r\n      paths: {\r\n        shifty: \"../dist/shifty.min\",\r\n        underscore: \"../dist/lodash.min\",\r\n        rekapi: \"../dist/rekapi\"\r\n      }\r\n    });\r\n\r\n    // Dependencies (Underscore and Shifty) are automatically loaded.\r\n    require(['rekapi'], function(Rekapi) {\r\n      var rekapi = new Rekapi(document.body)\r\n          ,cat\r\n          ,time = 0;\r\n\r\n      //Actor 1\r\n      var catImg = document.getElementById('actor');\r\n      cat = new Rekapi.Actor({ context: catImg });\r\n      rekapi.addActor(cat);\r\n\r\n      cat\r\n        .keyframe(time, {\r\n          'transform': 'translate(-240px, -160px) rotate(0deg)'\r\n        }).keyframe(time += 1200, {\r\n          'transform': 'translate(300px, 250px) rotate(0deg)'\r\n        }, 'bouncePast')\r\n        .wait(time += 400)\r\n        .keyframe(time += 700, {\r\n          'transform': 'translate(50px, 250px) rotate(0deg)'\r\n        }, 'easeInOutBack')\r\n        .wait(time += 150)\r\n        .keyframe(time += 850, {\r\n          'transform': 'translate(344px, 0px) rotate(-90deg)'\r\n        }, {\r\n          'transform': 'easeFromTo easeInOutCubic bouncePast'\r\n        })\r\n        .keyframe(time += 700, {\r\n          'transform': 'translate(344px, 800px) rotate(-90deg)'\r\n        }, 'easeFrom')\r\n        .wait(time += 500);\r\n\r\n      catImg.style.display = 'block';\r\n\r\n      //Actor 2\r\n      var catImg2 = document.getElementById('actor2');\r\n      cat = new Rekapi.Actor({ context: catImg2 });\r\n      rekapi.addActor(cat);\r\n     \r\n      //Delay 1s\r\n      time = 1000;\r\n\r\n      cat\r\n        .keyframe(time, {\r\n          'transform': 'translate(-240px, -160px) rotate(0deg)'\r\n        }).keyframe(time += 1200, {\r\n          'transform': 'translate(300px, 250px) rotate(0deg)'\r\n        }, 'bouncePast')\r\n        .wait(time += 400)\r\n        .keyframe(time += 700, {\r\n          'transform': 'translate(50px, 250px) rotate(0deg)'\r\n        }, 'easeInOutBack')\r\n        .wait(time += 150)\r\n        .keyframe(time += 850, {\r\n          'transform': 'translate(344px, 0px) rotate(-90deg)'\r\n        }, {\r\n          'transform': 'easeFromTo easeInOutCubic bouncePast'\r\n        })\r\n        .keyframe(time += 700, {\r\n          'transform': 'translate(344px, 800px) rotate(-90deg)'\r\n        }, 'easeFrom')\r\n        .wait(time += 500);\r\n\r\n      catImg2.style.display = 'block';\r\n\r\n      if (rekapi.renderer.canAnimateWithCSS()) {\r\n\r\n        /**\r\n          * Dump CSS to console\r\n          */\r\n        console.log(rekapi.renderer.toString({name: 'test'}));\r\n\r\n        rekapi.renderer.play();\r\n      } else {\r\n        rekapi.play();\r\n      }\r\n    });\r\n```\r\n\r\nThis is the part I don't quite understand. Both animations get the `.test` selector:\r\n\r\n```css\r\n.test {\r\n  animation-name: test-transform-keyframes;\r\n  animation-duration: 4500ms;\r\n  animation-delay: 0ms;\r\n  animation-fill-mode: forwards;\r\n  animation-timing-function: linear;\r\n  animation-iteration-count: infinite;\r\n}\r\n@keyframes test-transform-keyframes {\r\n...\r\n}\r\n.test {\r\n  animation-name: test-transform-keyframes;\r\n  animation-duration: 4500ms;\r\n  animation-delay: 1000ms;\r\n  animation-fill-mode: forwards;\r\n  animation-timing-function: linear;\r\n  animation-iteration-count: infinite;\r\n}\r\n@keyframes test-transform-keyframes {\r\n...\r\n}\r\n```\r\nHow come you can't make each animation's selector unique?"}}