{"action":"created","issue":{"url":"https://api.github.com/repos/juliangarnier/anime/issues/194","repository_url":"https://api.github.com/repos/juliangarnier/anime","labels_url":"https://api.github.com/repos/juliangarnier/anime/issues/194/labels{/name}","comments_url":"https://api.github.com/repos/juliangarnier/anime/issues/194/comments","events_url":"https://api.github.com/repos/juliangarnier/anime/issues/194/events","html_url":"https://github.com/juliangarnier/anime/issues/194","id":237819093,"number":194,"title":"Overlapping loops to create infinite cross-fade transitions","user":{"login":"docherty","id":325490,"avatar_url":"https://avatars5.githubusercontent.com/u/325490?v=4","gravatar_id":"","url":"https://api.github.com/users/docherty","html_url":"https://github.com/docherty","followers_url":"https://api.github.com/users/docherty/followers","following_url":"https://api.github.com/users/docherty/following{/other_user}","gists_url":"https://api.github.com/users/docherty/gists{/gist_id}","starred_url":"https://api.github.com/users/docherty/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/docherty/subscriptions","organizations_url":"https://api.github.com/users/docherty/orgs","repos_url":"https://api.github.com/users/docherty/repos","events_url":"https://api.github.com/users/docherty/events{/privacy}","received_events_url":"https://api.github.com/users/docherty/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-06-22T11:47:45Z","updated_at":"2017-07-17T00:49:43Z","closed_at":null,"body":"I'm trying to create a very simple animation and I nearly have it working but I'm stuck trying to get the end-->beginning of the loop to work correctly.\r\n\r\nI have 3 divs which I want to fade up and then down again (opacity 0 --> 1-->0) sequentially. Importantly, I want them to \"cross fade\" i.e. when one starts to fade down the next in the sequence starts to fade up. This is simple for the transitions between first-->second, second-->third but I can't figure out how to get third-->first to avoid a blank moment as the timeline resets after third.\r\n\r\nMy timeline logic is this:\r\n0->1s change div[0] opacity = 1\r\n3s->4s change div[0] opacity = 0\r\n3s ->4s change div[1] opacity = 1\r\n6s->7s change div[1] opacity = 0\r\n6s->7s change div[2] opacity = 1\r\n9s->10s change div[2] opacity = 0\r\n9s->10s change div[0] opacity = 1 __// this isn't possible?!__\r\n...\r\nThe HTML snippet:\r\n```\r\n    <div class=\"pressLogo\"><img src=\"img/logo1.svg\"></div>\r\n    <div class=\"pressLogo\"><img src=\"img/logo2.svg\"></div>\r\n    <div class=\"pressLogo\"><img src=\"img/logo3.svg\"></div>\r\n```\r\nThe js:\r\n```\r\n    var animatePressLogosTL = anime.timeline({\r\n      loop: true\r\n    })\r\n\r\n    animatePressLogosTL.add({\r\n      targets: '.pressLogo',\r\n      opacity: [{value: 0, duration: 1000},{value: 1, duration: 2000},{value: 0, duration: 1000}],\r\n      easing: 'easeOutQuad',\r\n      delay: function (el, i) {\r\n        return i * 3000\r\n      }\r\n    })\r\n```\r\nIs there a function of anime.js that would help solve this? If not, perhaps I could duplicate the first element at the end and control the timeline to jump to a frame after the start? Anyone got any experience of this sort of thing? Thanks."},"comment":{"url":"https://api.github.com/repos/juliangarnier/anime/issues/comments/315650377","html_url":"https://github.com/juliangarnier/anime/issues/194#issuecomment-315650377","issue_url":"https://api.github.com/repos/juliangarnier/anime/issues/194","id":315650377,"user":{"login":"Splendorr","id":150489,"avatar_url":"https://avatars5.githubusercontent.com/u/150489?v=4","gravatar_id":"","url":"https://api.github.com/users/Splendorr","html_url":"https://github.com/Splendorr","followers_url":"https://api.github.com/users/Splendorr/followers","following_url":"https://api.github.com/users/Splendorr/following{/other_user}","gists_url":"https://api.github.com/users/Splendorr/gists{/gist_id}","starred_url":"https://api.github.com/users/Splendorr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Splendorr/subscriptions","organizations_url":"https://api.github.com/users/Splendorr/orgs","repos_url":"https://api.github.com/users/Splendorr/repos","events_url":"https://api.github.com/users/Splendorr/events{/privacy}","received_events_url":"https://api.github.com/users/Splendorr/received_events","type":"User","site_admin":false},"created_at":"2017-07-17T00:49:43Z","updated_at":"2017-07-17T00:49:43Z","body":"Right now I'm thinking the solution for me will be to create and append elements like in this example: https://codepen.io/juliangarnier/pen/PpoboR"}}
{"actor":{"display_login":"Splendorr"}}