{"action":"created","issue":{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/414","labels_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/414/labels{/name}","comments_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/414/comments","events_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/414/events","html_url":"https://github.com/janpaepke/ScrollMagic/issues/414","id":109621258,"number":414,"title":"My parallax scrolling did not move smoothly.","user":{"login":"say8425","id":3258867,"avatar_url":"https://avatars.githubusercontent.com/u/3258867?v=3","gravatar_id":"","url":"https://api.github.com/users/say8425","html_url":"https://github.com/say8425","followers_url":"https://api.github.com/users/say8425/followers","following_url":"https://api.github.com/users/say8425/following{/other_user}","gists_url":"https://api.github.com/users/say8425/gists{/gist_id}","starred_url":"https://api.github.com/users/say8425/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/say8425/subscriptions","organizations_url":"https://api.github.com/users/say8425/orgs","repos_url":"https://api.github.com/users/say8425/repos","events_url":"https://api.github.com/users/say8425/events{/privacy}","received_events_url":"https://api.github.com/users/say8425/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-03T12:36:58Z","updated_at":"2015-10-03T13:55:24Z","closed_at":null,"body":"\r\n![parallax scrolling test](https://cloud.githubusercontent.com/assets/3258867/10262853/370af838-6a14-11e5-83e2-06b37aa07feb.gif)\r\n\r\nHello there. I made a parallax scrolling with ScrollMagic. But it has little issue like this GIF image. When scrolling, the images are scrolled but move up and down little repeatedly in the same time. This issue can be found in Safari, Firefox, Chrome on OS X 10.11 Did I code wrong source? Please confirm the source. Thanks a lot read it. Have a nice code:>\r\n\r\n**index.html**\r\n```html\r\n<html>\r\n\t<head>\r\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"index.css\">\r\n\t\t<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>\r\n\t\t<script src=\"greensock/TweenMax.min.js\"></script>\r\n\t\t<script src=\"js/scrollmagic/uncompressed/ScrollMagic.js\"></script>\r\n\t\t<script src=\"js/scrollmagic/uncompressed/plugins/animation.gsap.js\"></script>\r\n\t\t<script src=\"js/scrollmagic/uncompressed/plugins/debug.addIndicators.js\"></script>\r\n\t\t<script type=\"text/javascript\" src=\"skrollr.min.js\"></script>\r\n\t</head>\r\n\t<body style=\"height: 15500px\">\r\n\t\t<img id=\"logo\" src=\"logo.png\"></img>\r\n\t\t<img id=\"logo-fix\" src=\"logo.png\" style=\"position: fixed; right: 5px;\"</img>\r\n\t\t<h2 id=\"pt1\" style=\"position: absolute\">ParallaxTest 1</h2><br><br>\r\n\t\t<h2 id=\"pt2\" style=\"position: absolute\">ParallaxTest 2</h2>\r\n\r\n\r\n<!-- Parallax scroll code start\t-->\r\n\t\t<section id=\"trigger2\">\r\n\t\t\t<div id=\"pxPt\" style=\"position: relative\">\r\n\t\t\t\t<!-- You'll be not able to see loose1.png in GIF, cause did not recored. -->\r\n\t\t\t\t<img id=\"pt1\" style=\"position: absolute\" src=\"loose1.png\"></img>\r\n\t\t\t\t<img id=\"pt2\" style=\"position: absolute\" src=\"loose2.png\"></img>\r\n\t\t\t\t<img id=\"pt3\" style=\"position: absolute\" src=\"loose3.png\"></img>\r\n\t\t\t</div>\r\n\t\t</section>\r\n<!-- Parallax scroll code end -->\r\n\r\n\t</body>\r\n</html>\r\n\r\n<script>\r\n\t$(function () { // wait for document ready\r\n\t\tvar controller = new ScrollMagic.Controller();\r\n\t\t// build scene\r\n\t\tvar logoScene = new ScrollMagic.Scene({\r\n\t\t\tpushFollowers: false,\r\n\t        duration: 0,  // the scene should last for a scroll distance of 100px\r\n\t        offset: 0      // start this scene after scrolling for 50px\r\n    \t})\r\n\t\t.setPin(\"#logo\") // pins the element for the the scene's duration\r\n\t\t.addTo(controller);\r\n\t\t\r\n\t\t\r\n// Parallax scroll code start\r\n\t\tvar tween = new TimelineMax()\r\n\t\t.add([\r\n\t\t\tTweenMax.fromTo(\"#pxPt #pt1\", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),\r\n\t\t\tTweenMax.fromTo(\"#pxPt #pt2\", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),\r\n\t\t\tTweenMax.fromTo(\"#pxPt #pt3\", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})\r\n\t\t]);\r\n\t\t\r\n\t\tvar parallaxScene = new ScrollMagic.Scene({\r\n\t\t\ttriggerElement: \"#trigger2\",\r\n\t\t\tduration: 15500\r\n\t\t})\r\n\t\t.setTween(tween)\r\n\t\t.addIndicators()\r\n\t\t.addTo(controller);\r\n// Parallax scroll code end\r\n\r\n    });\r\n</script>\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/comments/145250465","html_url":"https://github.com/janpaepke/ScrollMagic/issues/414#issuecomment-145250465","issue_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/414","id":145250465,"user":{"login":"say8425","id":3258867,"avatar_url":"https://avatars.githubusercontent.com/u/3258867?v=3","gravatar_id":"","url":"https://api.github.com/users/say8425","html_url":"https://github.com/say8425","followers_url":"https://api.github.com/users/say8425/followers","following_url":"https://api.github.com/users/say8425/following{/other_user}","gists_url":"https://api.github.com/users/say8425/gists{/gist_id}","starred_url":"https://api.github.com/users/say8425/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/say8425/subscriptions","organizations_url":"https://api.github.com/users/say8425/orgs","repos_url":"https://api.github.com/users/say8425/repos","events_url":"https://api.github.com/users/say8425/events{/privacy}","received_events_url":"https://api.github.com/users/say8425/received_events","type":"User","site_admin":false},"created_at":"2015-10-03T13:55:24Z","updated_at":"2015-10-03T13:55:24Z","body":"I make the source more light. So frequent of moving up and down issue is reduced. But this issue is still remained.\r\n\r\n**before**\r\n```html\r\n<section id=\"trigger2\">\r\n    <div id=\"pxPt\" style=\"position: relative\">\r\n        <img id=\"pt1\" style=\"position: absolute\" src=\"loose1.png\"></img>\r\n        <img id=\"pt2\" style=\"position: absolute\" src=\"loose2.png\"></img>\r\n        <img id=\"pt3\" style=\"position: absolute\" src=\"loose3.png\"></img>\r\n    </div>\r\n</section>\r\n\r\n...\r\n\r\nvar tween = new TimelineMax()\r\n        .add([\r\n            TweenMax.fromTo(\"#pxPt #pt1\", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),\r\n            TweenMax.fromTo(\"#pxPt #pt2\", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),\r\n            TweenMax.fromTo(\"#pxPt #pt3\", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})\r\n        ]);\r\n\r\n        var parallaxScene = new ScrollMagic.Scene({\r\n            triggerElement: \"#trigger2\",\r\n            duration: 15500\r\n        })\r\n        .setTween(tween)\r\n        .addIndicators()\r\n        .addTo(controller);\r\n```\r\n\r\n**after**\r\n```html\r\n<img id=\"ptt1\" src=\"loose1.png\"></img>\r\n<img id=\"ptt2\" src=\"loose2.png\"></img>\r\n<img id=\"ptt3\" src=\"loose3.png\"></img>\r\n\r\n...\r\n\r\nvar tween = new TimelineMax()\r\n\t\t.add([\r\n\t\t\tTweenMax.fromTo(\"#ptt1\", 1, {scale: 1, autoAlpha: 0.05, top: 150}, {top: 15250, ease: Linear.easeNone}),\r\n\t\t\tTweenMax.fromTo(\"#ptt2\", 1, {scale: 1, autoAlpha: 0.42, top: 50}, {top: 15350, ease: Linear.easeNone}),\r\n\t\t\tTweenMax.fromTo(\"#ptt3\", 1, {scale: 1, autoAlpha: 0.42, top: 75}, {top: 15500, ease: Linear.easeNone})\r\n\t\t]);\r\n\t\t\r\n\t\tvar parallaxScene = new ScrollMagic.Scene({\r\n\t\t\ttriggerElement: \"#pxPt\",\r\n\t\t\tduration: 15500\r\n\t\t})\r\n\t\t.setTween(tween)\r\n\t\t.addIndicators()\r\n\t\t.addTo(controller);\r\n\r\n```"}}