im putting together a banner that has a lot of legal that needs to auto scroll to the end.
Heres what i have going on -
i have divs nested in my html that looks like this
<div id="legal_Box" class="dimensions" >
<div id="legal_Box2" class="dimensions">
<div id="legal" class="dimensions"></div>
</div>
</div>
in the css i have set element using overflow-y:scroll;
#legal_box2 {
overflow:hidden;
position: absolute;
width: 284px;
height: 757px;
left: 0px;
background-image: url(imgs/legal.png);
overflow-y:scroll;
}
in my js i want it to just scroll to the max amount.
TweenMax.to(legal, 2, {scrollTo:"max"});
for some reason it just does nothing. tried trouble shooting it a few ways but no luck. i have the latest CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js"></script>
Ultimately what i need to have happen is the legal which has the png starts scrolling as soon as the banner loads. scrolls to the end and then goes back to the top.
made a pen to help. (added dummy text where the png would be.)
what am i missing? is it the nested divs in my html?
any help or insight is greatly appreciated.
thanks
gabe