Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lynette

scroll text up

Recommended Posts

Hi, 

 

Wondered if anyone can help? 

 

I have text and i would like it to scroll from bottom to top, going off the banner view and then leaving it on the last text for like 2.5 seconds.

 

How would I do this??

<div class="banner">
  <div id="copyScroll">
      <p>
     Lorem Ipsum is simply dummy text?
    </p>
      <p>
      Lorem Ipsum is?
    </p>
      <p>
      Lorem Ipsum is simply dummy text of ?
    </p>
      <p>
      Lorem Ipsum is simply dummy ?
    </p>
      <p>
      Lorem Ipsum is simply dummy text of the printing?
    </p>
  </div>

</div>


<script>
var tl = new TimelineLite();

function anim() {
  copyScroll = document.querySelector('.copyScroll');
  p = document.querySelector('p');

  tl
  .to(copyScroll, 1.5, {y: '-400px'});
}
</script>
Link to post
Share on other sites

I've moved this to the regular GSAP forum as it will probably get more attention there. The Banner forum is more for technical questions related to packaging GSAP with ads on various networks or questions related to specs and requirements for HTML5 banner ads. 

 

It looks like you have the text scrolling ok. If you want to remove the text after 2.5 seconds you can just add another tween to hide it like

tl
  .to(copyScroll, 1.5, {y: '-400px'})
  .to(copyScroll, 1, {opacity:0}, "+=2.5") // do this 2.5 seconds after scrolling stops

It really helps to provide a CodePen demo even for seemingly simple questions as it helps us better understand the issue and provide better answers.

 

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×