Jump to content


scroll text up

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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">
     Lorem Ipsum is simply dummy text?
      Lorem Ipsum is?
      Lorem Ipsum is simply dummy text of ?
      Lorem Ipsum is simply dummy ?
      Lorem Ipsum is simply dummy text of the printing?


var tl = new TimelineLite();

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

  .to(copyScroll, 1.5, {y: '-400px'});
Link to comment
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

  .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 comment
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.