I have a skrollr animation that basically slides in a H2 tag from the bottom going up and a div from the top going down at the same time. They are both fixed positioned and aligned to meet up horizontally centered on the screen when their parent is at the top of screen.
When the parent is at the top of the screen the h2 tag is centered and the rightSide div's top is at the top of the screen which is great, the issue is that the rightSide div is supposed to slide down and fade out of the screen when the parent's bottom reaches the top, but it just breaks and moves down without any animation.
Why would this be happening? The parents heights is the same as the rightSide div's height
Here is the example code of how im doing it:
<section class="sliderInSection" id="clients">
<div class="leftSide">
<h2
data-anchor-target="#clients"
data-bottom-top="top: 100%; opacity: 0;"
data-top="top: 50%; opacity: 1;"
data-top-bottom="top: -50%; opacity: 0;"
><span>Our<br/>Clients</span>
<div class="arrow"></div>
</h2>
</div>
<div class="rightSide"
data-anchor-target="#clients"
data-bottom-top="top: -100%; opacity: 0;"
data-top="top: 0%; opacity: 1;"
data-top-bottom="top: 100%; opacity: 0;"
>
<p>here is content</p>
</div>
</section>
