Simulate continous text scroll

[alint]

Hello,

 

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.

 

Alin

[Rodrigo]

Hi Alin,

 

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

 

http://greensock.com/forums/topic/10130-tweening-progress-of-timeline-relative-value/

 

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

 

Rodrigo.