Text Animation on scrolling

[jatinsangwan]

Hi,

How do I get multiple texts to change on every scroll keeping the background fixed..

Like the blue text in the following link but keeping the background fixed.

https://wickret.cuberto.com/

[ZachSaucier]

Hey jatinsangwan. Are you referring to the section starting with "No monthly service fees"? If so, that's simply a section that's pinned and then translated in the x direction to create a fake horizontal scroll. There are a few examples of that sort of thing in the ScrollTrigger demos section.

[akapowl]

 

There is a whole lot of blue text on that website, so it's not so clear which effect you are referring to.

 

If it is the one in the first section,exchanging the text in the headline on scroll, you could use a concept as simple as this (although they do it a bit different on that site)

 

See the Pen 8172b37099c1d7350f057c09cb3a712a by akapowl (@akapowl) on CodePen

 

[tailbreezy]

I actually don't see much benefit in using display: unset. What are the possible performance gains in using it like this instead of just specifying block, static, hidden, etc. I haven't been around for long, but this is the first time I have seen it used (not a fan, seems to me it hinders code readability)

[akapowl]

15 hours ago, tailbreezy said:

What are the possible performance gains in using it like this instead of just specifying block, static, hidden, etc

 

I'm no expert on this, but I personally wouldn't think that there would be much of a difference in setting something to display: "unset" vs display: "block".

I might be totally mistaken though, but I think with an effect like this the performance-hit should be pretty much negligable.

 

Given this was just an idea (and we don't even know if that is what jatinsangwan even wanted to achieve) I didn't put too much thought into it, tbh.

But you are right, there is always room to improve on and I bet there are at least a dozen ways to achieve that effect.

 

Using hidden h2s for example (as I did) might not be the best idea - using a span inside the h1 might be another way to go with instead (which also comes closer to what was done on the site linked to). For maximizing code-readability one could e.g. use a scrubbing timeline for setting the innerHTML instead of multiple ScrollTriggers as I did - which doesn't mean it would neccessarily get easier to understand though, since you'd first have to get an understanding how durations and the position-parameter work on scrubbing ScrollTriggers.

 

See the Pen d19091af1f62e0473a2ca85bcdaf54d2 by akapowl (@akapowl) on CodePen

 

[arturs_r]

Hello everyone
I am new here.

I am try to achieve in Next JS the same effect as in the website provided in the beginning of the post.

https://wickret.cuberto.com/

I would like to achieve that on scrolling the text goes either left or right, and the rest of content stays and does not move until the sections has been scrolled completely, like on the website itself.

But I am totally lost. 

When I am scrolling my page, my text scrolls to the side, and in the same time page scrolls down, leaving the content scrolling up.

Is there any trick how to achieve this?
Thank you in advance

 

[akapowl]

Hello, welcome to the forum @arturs_r

 

Although the website reference is the same, the effect you are going for is not really related to this topic, so it would be great if you could start a new thread for your question (if you still are running into problems after this).

 

1 hour ago, arturs_r said:

When I am scrolling my page, my text scrolls to the side, and in the same time page scrolls down, leaving the content scrolling up.

 

The solution to that would be to pin surrounding container / section, so it will stay in place (as also to be seen in the thread linked below).

 

It is always best to include a minimal demo of what you have tried so far - we are more than happy to help you with GSAP specific questions and even if you get stuck along the way with a specific effect most of the time - but it's hard to give you advice without knowing what you have tried.

 

For faking horizontal scroll like that, there are several demos in the demo-section and if you search for e.g. 'horizontal' in these forums, you will find a whole lot of threads that might help you get further with this. Here is one of those - hope that'll already help a bit - happy scrolling