Tabs Fade Effect On Scroll And Hover

[Rohan Jariwala]

Hello, I want to make the tab fade on a scroll and the hover effect on a scroll. below is the demo link 

demo link:- https://www.eats365pos.com/ 

section screenshot:- https://prnt.sc/x4EXbK7XQRn7  

check how the image, text, and tab change on scroll and also on hover. I want to make same to same animation.

can anyone explain to me how can I achieve this animation?

See the Pen NWmgjQY by RohvolutionCoder (@RohvolutionCoder) on CodePen

[Rodrigo]

Hi,

 

You should first try to create the animation without ScrollTrigger first, just forget about that and focus only on the animation. Keep in mind that ScrollTrigger, in this particular case, just updates the timeline's playhead position nothing more, so is better to get the animation correctly first.

 

Basically what's happening there is just some fade in/out with a pinned section. Here is a simple demo but instead of animating on the Y axis on the right you have to repeat the animation on the left:

See the Pen wvYVjvb by GreenSock (@GreenSock) on CodePen

 

Hopefully this get you started.

Happy Tweening!

[Rohan Jariwala]

@Rodrigo do you have any other more specific solution or pen? so I can undertand. 

[Rodrigo]

Hi,

 

Sorry nothing that specific, unfortunately we don't have the time resources to create custom solutions for our users. We offer paid consulting services or you can post in the Jobs & Freelance forums. Although if another user wants to take a crack at creating something for you for free they can, I just want to manage expectations.

 

You can check this Codepen collection in order to see if you find something similar:

https://codepen.io/collection/AEbkkJ

 

Happy Tweening!