Jump to content


Simulate continous text scroll

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



I can not figure out what would be the best way to accomplish this: I would liek to simulate a continous text scroll on mobile device.


I made a PNG that has some horizontal lines which look like text paragraphs. I would like to move this PNG from bottom to top, simulating a scroll on mobile device. The animation runs in loop and I get an empty screen between iterations. I would like the same PNG to start moving into screen while the previous moves out so it looks like a continous scroll.


What is the best way to animate this? Shold I use the same image twice on two separate tweens?


Thank you.



Link to comment
Share on other sites

Hi Alin,


I would choose this type of approach, if you can replicate it of course:




See the Pen HBabo by GreenSock (@GreenSock) on CodePen


Since you're working with images I believe is completely doable. Perhaps in this case two sets of images and each set has at least two images itself, like that you can cover both ends of the container. Also the beauty of this approach is that you can make it work with any DOM element you need, not just images.


Hopefully this will get you on your way, if not well... you know where to find us :D



  • Like 1
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.