Issues with ScrollTrigger on horizontal heading scroll

[Atul Singh]

Hello everyone!

I'm trying to create a horizontal scrolling animation for a heading that moves as the user scrolls down the page. Can anyone help me with this? Thank you!

I'd like the animation to be similar to the one in the following

See the Pen RwYQzjJ by Dyakho (@Dyakho) on CodePen

.

Last below is my code.

See the Pen zYymmJP by atulkumarsingh (@atulkumarsingh) on CodePen

[mvaneijgen]

Hi @Atul Singh welcome to the forum!

 

Looks good already, what do you have issues with? I've just tweaked the start and end makers to be more inline with the example you've shared and removed pin: true 

 

Is this more inline with what you're looking for? Hope it helps and happy tweening! 

 

See the Pen YzdJgXb?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Atul Singh]

Hi @mvaneijgen Thank you for your response.

Yes, it's working fine, but there's an issue where users can't read the text because it's displayed as an animation. I want it to be similar to the <marquee> tag animation.

For example, when we get close to the heading, it starts scrolling immediately, which is causing difficulty in reading the starting word of the text.

 

[mvaneijgen]

Well then have it start later. When you enable the markers you can easily see where thing start and end, so you can tweak it so that it suits your needs. 

 

See the Pen GRPYajY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

or have it start from more off screen 

 

See the Pen BavqeQE?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

It is up to you! You're the developer, so you know what effect you want to go for. 

[Atul Singh]

52 minutes ago, mvaneijgen said:

Well then have it start later. When you enable the markers you can easily see where thing start and end, so you can tweak it so that it suits your needs. 

 

 

 

 

or have it start from more off screen 

 

 

 

 

It is up to you! You're the developer, so you know what effect you want to go for. 

@mvaneijgen Thanks I am trying to add animation on the home page. I tried everything but animation is not looking good. https://splashdigital-4429477.hs-sites.com/home?hsCacheBuster=4219

[mvaneijgen]

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

[Atul Singh]

14 minutes ago, mvaneijgen said:

Sorry we can't really debug live websites, there is just no way to modify the code. Try creating a minimal demo of what you're trying to do, this has two benefits. First this allows you to experiment and try out new ideas. By making it simple people usually solve 90% of their own bugs. Second, you have an easy version you can share in which anyone could edit and modify the code.

@mvaneijgen thanks. I have fixed it. Thank you so much.