Horizontal Scroll with same (static) text with different background (change text color as well according to background color) in gsap reactjs

[digambar patil]

Hello Guys,

 

I am trying to create an effect with horizontal scroll where text will be static and will change the color according to background color.

 

Please Codesandbox Example where

1. First block has white background with "Thank You" text in black

2. On scroll, horizontally it should scroll and background should be black and "Thank you" text should be in white

3. then on scroll to end, start vertical scrolling 

[mvaneijgen]

Hi @digambar patil welcome to the forum! 

 

Before doing anything with ScrollTrigger you have to ask your self what is the animation I want to happen and focus on creating that animation. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  I've also found that you hardly need more then one ScrollTrigger to get the desired effect. 

 

I've forked your code and disabled some things (please next time tell us what file we should be looking at. Luckily there weren't that many files, but I still had to search for where the code was). If I understand you correctly

 

1. Text on a white background on page load
2. Then text on black background 
3. Then move everything to the left

If that is correct you could  enable the ScrollTrigger code again and see how that works on scroll. Hope it helps and happy tweening! 

 

https://codesandbox.io/p/sandbox/modern-river-forked-gtp946?file=%2Fsrc%2FApp.tsx%3A17%2C1-23%2C12

 

I would also check out our React guide has a lot of great tips and tools https://gsap.com/resources/React/

[digambar patil]

thank you @mvaneijgen you are a rockstar, works well with scrolltrigger

[digambar patil]

Hello @mvaneijgen and community

 

Thank you for your help which helped me to move forward with code but I am stuck again, let me explain in brief

 

1. On page load header (sticky header) and thank you section in white background with text (menu and thank you text) in black color

2. On scroll, horizontally it should scroll and background should be black for header and thank you section with text in background with "sticky" header

3. then on scroll to end, start vertical scrolling with sticky header with white background

 

I am not able to make it sticky once the transition is done and along with that header while scrolling from black to white scrolling is not smooth

 

for reference please check the codesandbox here

[Rodrigo]

Hi,

 

I'm not sure I follow 100% what you're trying to do here, maybe something like this:

https://codesandbox.io/p/sandbox/modern-river-forked-2wj9rf?file=%2Fsrc%2Fcomponents%2Fnavbar%2FHeader.tsx%3A29%2C21

 

If that's not what you're looking for, please be specific about the expected behavoiur and if possible post a link to a demo or website that works in the way you intend.

 

Hopefully this helps.

Happy Tweening!

[digambar patil]

Trying to create same effect but with sticky header which needs to present on all page. 

 

@Rodrigo I am not able to see the codesandbox, "Sandbox not found"

Edited December 27, 2023 by digambar patil
need to reply to moderator

[Rodrigo]

Hi,

 

Sorry, yeah this things when forked are private for some reason, I updated the sandbox so now is public:

https://codesandbox.io/p/sandbox/modern-river-forked-2wj9rf

 

For future references is better to use Stackblitz for creating demos in React/Vue/Svelte/Astro/Remix.

 

Happy Tweening!

[digambar patil]

Hi @Rodrigo

 

Thanks for your response, the sticky header needs to be available on all sections like thank you with transition and on all last container with white background. Also the black background needs to be vertically scrolled effect when transition from black to white on last container first section

 

only thing I am struggling is this one. Let me know if you need more information

[Rodrigo]

Hi,

 

I updated the demo. This is as simple as playing with the end value in the ScrollTrigger configuration, something you can read in the ScrollTrigger docs actually:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

https://codesandbox.io/p/sandbox/modern-river-forked-2wj9rf

 

In order to animate the background color of the navbar using ScrollTrigger I recommend you this video by @Carl

 

Happy Tweening!

[digambar patil]

Thanks @Rodrigo for your prompt response, only thing is remaining is black background should also scroll  from navbar and on last container  navbar background should be white with sticky which is I am not able to make it. 

 

Will take a reference and try to do it. If you get it then please share the solution.

 

Thank you in advance

[digambar patil]

I am trying to create a scroll effect for header as well from black to white vertically when moving from thank you block to last container block

[Rodrigo]

16 minutes ago, digambar patil said:

I am trying to create a scroll effect for header as well from black to white vertically when moving from thank you block to last container block

I don't understand what's the problem. Isn't that exactly what the video link in my previous post is showing what to do? Did you watched the video and saw the super simple codepen demo Carl created to show how is done?

See the Pen KKvQOKY by snorkltv (@snorkltv) on CodePen

 

Happy Tweening!

[digambar patil]

Vertical scroll from black to white is what i am trying to create for navbar. In this video which I referred previously changing header background color without scroll effect.

[Rodrigo]

33 minutes ago, digambar patil said:

Vertical scroll from black to white is what i am trying to create for navbar. In this video which I referred previously changing header background color without scroll effect.

Sorry, I read your post a few times and I just don't understand what the problem is. Please create a minimal demo that clearly illustrates the problem you're having.

 

Happy Tweening!

[digambar patil]

Hello @Rodrigo

will try to create a figma design or an video and will share with you in somedays. 

 

Let me try to explain again what I am trying to do here,

1. till background black thank you block is all good and working as you shared
2. once the black background scrolls vertically with the same effect (scrolling vertically effect) navbar(header) also converted from black to white. Not sudden as shown here 

   See the Pen KKvQOKY by snorkltv (@snorkltv) on CodePen

3. The white background navbar(header) will be sticky for other sections (last containers)

[Rodrigo]

That is the demo Carl created, we need something with the code you're trying to achieve. You can try using scrub instead of using toggleActions like Carl's demo.

 

Check the ScrollTrigger docs to see all the possibilities.

 

Happy Tweening!

[digambar patil]

Hi Team, I am using the following transition but only issue i am facing is when window is resized the transition is not working as expected but if I refresh then works well. I have attached screenshots for the same.

 

https://codesandbox.io/p/sandbox/modern-river-forked-2wj9rf?file=%2Fsrc%2Fcomponents%2FThankYou.tsx

 

 

[GreenSock]

That's because in your Header.tsx file, you're creating a local variable for innerWidth like this: 

const { innerHeight, innerWidth } = window;

So that gets set initially when that function runs, but then when you resize the window, you never updated that value, so it's using the original amount, throwing off the end. In your other file, you're referencing window.innerWidth directly. So you end up with two different values - one that's updated with the new window size, and the other that uses a stale value. Just use window.innerWidth in BOTH places: 

// BAD
end: () => "+=" + innerWidth,
  
// GOOD
end: () => "+=" + window.innerWidth,

Does that clear things up? 

[digambar patil]

Thanks @GreenSock