{"__v":2,"_id":"56847cb55a66610d006eabbd","category":{"__v":34,"_id":"555627c5ea5e120d001884ff","pages":["555627c6ea5e120d00188501","55562fbdea5e120d00188526","5556368b150ba30d00f4e0b7","5556590e26e9bc0d0044eb61","55567be0150ba30d00f4e248","55567bf026e9bc0d0044ec55","55567c08150ba30d00f4e24a","55567c14150ba30d00f4e24c","55567c4426e9bc0d0044ec59","55567c501026001900d72abc","55567c5926e9bc0d0044ec5d","55567c9a1026001900d72abf","55567cd9150ba30d00f4e24f","55567ce4150ba30d00f4e251","55567ced26e9bc0d0044ec61","555698d62f6b480d0034d9a4","55e0c386dc6b2e170074f2e3","55e0c5e15087cb1900986c16","55e0f99926f51b0d009b1744","567b35067c40060d0056041d","567b3531ee052b1700dbd9da","56846a5a65976e0d00001c57","5684783bc11c7e0d00aaff71","56847cb55a66610d006eabbd","56848a0cf72e9e0d00e098e5","568ccdf38602880d001ce230","569431fcd8c04d1700e5ae05","569ebe1ad233620d007055fb","569edd718f6d4b0d00f13b91","56aa5c3d13a69a0d00a77a09","56aa6eda4d38401900199f7a","56c7a7d5f9aa3b0d00c8457b","56d0ab1440d36e1d00bc143b","56ec9c5a493ce620008ea4c8"],"project":"555627c4ea5e120d001884fb","version":"555627c4ea5e120d001884fe","reference":false,"createdAt":"2015-05-15T17:07:17.512Z","from_sync":false,"order":0,"slug":"design","title":"Design Studio"},"project":"555627c4ea5e120d001884fb","user":"55562799ea5e120d001884f8","version":{"__v":10,"_id":"555627c4ea5e120d001884fe","project":"555627c4ea5e120d001884fb","hasDoc":true,"hasReference":true,"createdAt":"2015-05-15T17:07:16.918Z","releaseDate":"2015-05-15T17:07:16.918Z","categories":["555627c5ea5e120d001884ff","55562a5526e9bc0d0044ea47","555653821026001900d72a3c","5556685c1026001900d72a85","5556687626e9bc0d0044ec04","555668821026001900d72a87","55566892150ba30d00f4e206","555668b826e9bc0d0044ec05","55e0fb6026f51b0d009b1746","567b3b3017368a0d009a6e54"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"createdAt":"2015-12-31T00:54:13.008Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":8,"body":"Scoll Triggers allow an ad to accept an action in response to scrolling within a page. Similar to some trigger events, Scroll Triggers may only be applied to a stage layer.\n[block:image]\n{\n \"images\": [\n {\n \"image\": [\n \"https://www.filepicker.io/api/file/Ot82bI2nTnufsuhK1K9f\",\n \"Screen+Shot+2015-12-23+at+1.36.15+PM.png\",\n \"360\",\n \"298\",\n \"#0d71d9\",\n \"\"\n ]\n }\n ]\n}\n[/block]\n## Modes\nThe Scroll Trigger supports two modes which respond to either the ad’s relative position to the viewport or in response to a scrolling event within the page itself.\n\n* **Ad in Viewport** - This mode is currently most useful when used in conjunction with the GIF Controller component. This allows the trigger to fire as an ad's position changes on the page relative to the top, the bottom, or middle of the user's viewport within the page. You can also set an Offset which can be defined a certain number of pixels or a percentage from the top or bottom of a page.\n\n[block:image]\n{\n \"images\": [\n {\n \"image\": [\n \"https://www.filepicker.io/api/file/YNu3XzGfTGeLiHp4zTly\",\n \"Screen+Shot+2015-12-23+at+1.36.54+PM.png\",\n \"435\",\n \"443\",\n \"#04384c\",\n \"\"\n ]\n }\n ]\n}\n[/block]\n * **Page Scroll** - The Page Scroll mode can be used to fire events as a user scrolls up or down on the page. This mode supports custom increments that allow the trigger to be fired for a specified number of incremental pixels. \n[block:image]\n{\n \"images\": [\n {\n \"image\": [\n \"https://www.filepicker.io/api/file/uEp5RTRdRrWLmN1y2jWx\",\n \"Screen+Shot+2015-12-23+at+1.37.09+PM.png\",\n \"427\",\n \"356\",\n \"#507d95\",\n \"\"\n ]\n }\n ]\n}\n[/block]","excerpt":"","slug":"design-studio-scroll-triggers","type":"basic","title":"Scroll Triggers"}