{"action":"created","issue":{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/698","repository_url":"https://api.github.com/repos/janpaepke/ScrollMagic","labels_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/698/labels{/name}","comments_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/698/comments","events_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/698/events","html_url":"https://github.com/janpaepke/ScrollMagic/issues/698","id":243028291,"number":698,"title":"autorefresh scenes on resize AND turn off for mobile","user":{"login":"zucoa","id":22177573,"avatar_url":"https://avatars3.githubusercontent.com/u/22177573?v=4","gravatar_id":"","url":"https://api.github.com/users/zucoa","html_url":"https://github.com/zucoa","followers_url":"https://api.github.com/users/zucoa/followers","following_url":"https://api.github.com/users/zucoa/following{/other_user}","gists_url":"https://api.github.com/users/zucoa/gists{/gist_id}","starred_url":"https://api.github.com/users/zucoa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zucoa/subscriptions","organizations_url":"https://api.github.com/users/zucoa/orgs","repos_url":"https://api.github.com/users/zucoa/repos","events_url":"https://api.github.com/users/zucoa/events{/privacy}","received_events_url":"https://api.github.com/users/zucoa/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-07-14T15:20:08Z","updated_at":"2017-11-17T16:16:29Z","closed_at":"2017-07-27T14:15:15Z","author_association":"NONE","body":"Hello - fantastic plugin! I've been combing through the issues that would address the following: \r\n\r\n1.  turn off scroll magic on mobile AND\r\n2.  refresh my scenes on resize without having to hit the browser reload button\r\n\r\nI'm developing my app within a bootstrap framework and came across these issues where I implemented  code from 15 (#15 and #38) though the latter isn't something I'm completely grasping for my app.\r\n\r\nThe first scene is applied to 20 or sections throughout my app and everything works fine with regard to number 1 above, with the problem that I have to reload the page on browser resize. Any thoughts on getting both of the above to work together?\r\n\r\n`\t\r\n\r\n\t\tvar tooSmall = false;\r\n\t\tvar controller = null;\r\n\t\tvar maxWidth = 768; // sizes above maxWidth will turn on scroll magic\r\n\r\n\t\tif( $(window).width() < maxWidth ) {\r\n\t\t\ttooSmall = true;\r\n\t\t}\r\n\t\tvar controller = new ScrollMagic.Controller();\r\n\t\tfunction initScrollMagic() {\r\n\t\t\t$('body').scrollTop( 0 );\r\n\t\t\tcontroller = new ScrollMagic.Controller();\r\n\t\t\t// add your ScrollMagic scene goodness here\r\n\t\t\t\r\n\t\t\t// loop through all elements with a class of fadein-trigger  https://www.youtube.com/watch?v=c85GjM7vy5A\r\n\t\t\t$('.fadein-trigger').each(function(){\r\n\t\t\t\t// Tween\r\n\t\t\t\tvar fadein_tween = TweenMax.from($(this), 1.5,{ autoAlpha: 0, ease:Power1.easeIn});\r\n\t\t\t\t// Scene\r\n\t\t\t\tvar fadein_scene = new ScrollMagic.Scene({\r\n\t\t\t\t  triggerElement: this, // this refers to the .fadein-trigger class\r\n\t\t\t\t  triggerHook: 1, // or use a value between 0 and 1; 0 = top, .5 = middle, 1 = bottom\r\n\t\t\t\t  reverse: false // when false the animation will only play once\r\n\t\t\t\t})\r\n\t\t\t\t.setTween(fadein_tween) // trigger TweenMax tween\r\n\t\t\t\t.addTo(controller);\r\n\t\t\t});\r\n\t\t\t\r\n\t\t\tvar download_scene = new ScrollMagic.Scene({\r\n\t\t\t\ttriggerElement: '.summary_scrollmagic',\r\n\t\t\t\ttriggerHook: 0,\r\n\t\t\t\tduration: 500\r\n\t\t\t})\r\n\t\t\t.setClassToggle(\"#scrollmagic-class\", \"active\")\r\n\t\t\t//.addIndicators()  for debugging\r\n\t\t\t.addTo(controller);\r\n\t\t}\r\n\r\n\t\tif( !tooSmall ) {\r\n\t\t\tinitScrollMagic();\r\n\t\t}\r\n\r\n\t\t// part of the problem is that window resizes can trigger multiple times as the events fire rapidly\r\n\t\t// this solution prevents the controller from being initialized/destroyed more than once\r\n\t\t// https://github.com/janpaepke/ScrollMagic/issues/15\r\n\t\t$(window).resize( function() {\r\n\t\t\tvar wWidth = $(window).width();\r\n\t\t\tif( wWidth < maxWidth ) {\r\n\t\t\t\tif( controller !== null && controller !== undefined ) {\r\n\t\t\t\t\t// completely destroy the controller\r\n\t\t\t\t\tcontroller = controller.destroy( true );\r\n\t\t\t\t\t// if needed, use jQuery to manually remove styles added to DOM elements by GSAP etc. here\r\n\t\t\t\t}\r\n\t\t\t} else if( wWidth >= maxWidth ) {\r\n\t\t\t\tif( controller === null || controller === undefined ) {\r\n\t\t\t\t\t// reinitialize ScrollMagic only if it is not already initialized\r\n\t\t\t\t\tinitScrollMagic();\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t`"},"comment":{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/comments/345288372","html_url":"https://github.com/janpaepke/ScrollMagic/issues/698#issuecomment-345288372","issue_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/698","id":345288372,"user":{"login":"woodybepierced","id":2552077,"avatar_url":"https://avatars0.githubusercontent.com/u/2552077?v=4","gravatar_id":"","url":"https://api.github.com/users/woodybepierced","html_url":"https://github.com/woodybepierced","followers_url":"https://api.github.com/users/woodybepierced/followers","following_url":"https://api.github.com/users/woodybepierced/following{/other_user}","gists_url":"https://api.github.com/users/woodybepierced/gists{/gist_id}","starred_url":"https://api.github.com/users/woodybepierced/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/woodybepierced/subscriptions","organizations_url":"https://api.github.com/users/woodybepierced/orgs","repos_url":"https://api.github.com/users/woodybepierced/repos","events_url":"https://api.github.com/users/woodybepierced/events{/privacy}","received_events_url":"https://api.github.com/users/woodybepierced/received_events","type":"User","site_admin":false},"created_at":"2017-11-17T16:16:29Z","updated_at":"2017-11-17T16:16:29Z","author_association":"NONE","body":"@zucoa Do you have a live example, or Fiddle, of this working? \r\n\r\nI have yet to use isMobile. Does \"if (isMobile.any) return;\" stop JS from running any further at that point?\r\n\r\nAs well, in your trimmed down code, I don't see the .resize function. How did you finalize this working?"}}
{"actor":{"display_login":"woodybepierced"}}