I'm trying to use Superscrollorama to animate some stuff on a webpage. The content only animates inside a specific div on the page, so I want the user to be able to scroll the page normally until that section is reached, then pause the page scrolling while keeping the scrollable animation. Once the animation has completed, they would continue scrolling down the page.
I've tried using the pin functionality, but my div that contains the animations stays put while the rest of the page still scrolls. So I set it to pin the whole content of the page, and adjusted the offset so it wouldn't start until the user got to the animated section. This seems to be the right direction, but when I get to that scroll point, it jumps me back to the top of the page for some reason. If I jerk the scroll bar down past that point it seems to sort of work.
Here's my code I have thus far:
var controller = $.superscrollorama(),
animatedContent = $('#content');
controller.pin(animatedContent, 1000, {
anim: (new TimelineLite())
.append(
TweenMax.to($('#water_color'), .5, {css:{height:0}})
),
offset: 400
});
And the HTML looks like this
<body id="whats_new" includeLocalCSS="true" includeLocalJS="true" class="innovation reflex wide">
<section class="hero_area">
<div class="image_background">
<img src="fake.jpg">
</div>
<div class="hero_overlay">
<div class="container_12">
<section class="demo top_blue_border grid_12">
<div id="animated_content">
<div id="text_intro" class="animation_copy">
<h2 class="type-light">Engineered to<br>Move with You</h2>
<div class="top_blue_border"></div>
<p>blah blah</p>
</div>
<div id="water_color">
<img id="blue_bar" src="sample.png" alt="">
</div>
<div id="base_image">
<img src="sample.jpg">
</div>
</div>
</section>
</div>
</div>
</section>
</body>
The animated content div is where the animations actually happen and are about 600 pixels down the page.