How can I create a scrolling effect that makes text move left and right?

[Vineeth Achari]

Hi,

Could please anyone let me know How can I create a scrolling effect that makes text move left and right?. I'm looking for something closely resembling this. Thanks a lot.

https://compost.recyc-quebec.gouv.qc.ca/

See the Pen XWojvKP by vineethachari (@vineethachari) on CodePen

[Trapti]

Hi, 

You can refer to the below pen. Attach a scroll trigger to the timeline for making this effect to run on the scroll. 
- If you want text (faded) to be visible always. Experiment with opacity, currently it is 0. 

 

See the Pen OJZbObE?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

[Trapti]

Text from left to right. 

 

See the Pen rNoWByN?editors=1010 by tripti1410 (@tripti1410) on CodePen

 

[Vineeth Achari]

I tried something, but it's not turning out as successfully as their approach.

https://compost.recyc-quebec.gouv.qc.ca/

 

 

[Trapti]

@Vineeth Achari  I have updated my pen.

[Vineeth Achari]

Do you have any thoughts on how to make this scroll animation end vertically centered? Currently, it ends at the top.

 

See the Pen rNoWByN by tripti1410 (@tripti1410) on CodePen

[Trapti]

It was not ending at the top. It was going back to its original position where it had been placed. I added some content above this text to change the position of this text on the page and the start trigger. You can check the pen.