Scroll Container
Scroll Container
Add indata-selector="#scrollContent" in the script block
<style>
body {
padding: 0;
margin: 0;
}
#scrollWrapper {
width: 100%;
height: 100vh;
overflow: hidden;
}
#scrollContent {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
body {
padding: 0;
margin: 0;
}
#scrollWrapper {
width: 100%;
height: 100vh;
overflow: hidden;
}
#scrollContent {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</style>
ADVANCED: This feature allows you to specify a scroll container, this has multiple purposes but a common one is restricting mobile browsers like chrome from creating layout shift when removing the address bar.
IMPORTANT: You must add the additional attribute on the <script> tag, the CSS in your stylesheet and ID's to enable this.
IMPORTANT: You must ensure your content does not change in size after load, for instance lazy loading images can cause the page to be longer than the ScrollTrigger is expecting and animations will be skewed.
Structure
ScrollTrigger
GSAP example
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Move me Right
Move me Left
Scroll Container