Mahabub Hossain

Hello experts, I didn't got the solution yet. Is there anyone to help me about this? Thank you

Many many thanks for replying me, for making rtl website I've to must use direction:rtl; rather than text align. Hoping you'll help me to fix this problem. Have a great day! Thanks in advance

Many many thanks for your reply. I added it to the css in the body tag body { font-family: "Signika Negative", sans-serif; font-weight: 300; margin: 0; padding: 0 20px; direction: rtl; } I'll be glad if you solve this problem whenever you get time. Have a great day! Thanks again

Hi there, I'll be very thankful if you please help me to solve this. I'm facing very much problem about this. Thank you

Many many thanks for replying me and sorry for the occurrence, actually I noticed, but can't configure out the solution, can you please take a look at my problems, if you don't mind. Thank you

Many many thanks for your solution. This is exactly what I'm looking for. Have a great day!

Hello experts, I'm a very beginner with gsap. I'm facing a problem while I'm using animation with split text plugin. If I apply css to my body tag direction:rtl; the animated text are not behaving , as the normal text do. I created a demo. please take a look, when I use direction rtl to my body tag, animated text are not behaving the right way, look at the h2 tag. Also if I apply text-transform: capitalize; property to my animated text, the whole line getting uppercase. How can I solve this. I'll be very thankful if anyone help me about this. Thanks in advance

Hi buddy, can you help me a little more. I update the codepen demo, please take a look. https://codepen.io/Mahabub-Hossain-the-selector/pen/rNQPXgz In here, I added padding to the this class="banner". Because of it's our trigger element, now it's behaving little bit differently,,,If I scroll to the bottom of the section my sticky elements are overlap to the next section. How can I take control of it? In large device I've 200px padding,,in small device it'll maybe 100px or something else,,whatever it is,,please do something that it works everywhere nicely. Thanks

Many many thanks, You're awesome. This is exactly what I'm looking for. Have a great day!

Many many thanks for supporting me. here is the codepen demo,,please take a look https://codepen.io/Mahabub-Hossain-the-selector/pen/QWJYRgv In my page I've a section where I've three unequal columns,,,I want to make them sticky like normally css do. But the problem is If I use scroll smoother than sticky position not working. That's why I decided to make them sticky with gsap itself. But with gsap I can't achieve the same thing. How can I make them sticky like normal css do? Hoping this time it's clear to you. Thanks in advance

Many many thanks for your helpful answer. I got it. Please take a look,,I updated the codepen demo. https://codepen.io/Mahabub-Hossain-the-selector/pen/jOQdeeY The problem is,,when .banner section ends scrolling, still the sidebar sticking and overlaping to the next sections. How can I fix this? Hope you'll get my question? Thank you

Many many thanks for your helpful answer. I got it. Please take a look,,I updated the codepen demo. https://codepen.io/Mahabub-Hossain-the-selector/pen/jOQdeeY The problem is,,when .banner section ends scrolling, still the sidebar sticking and overlaping to the next sections. How can I fix this? Hope you'll get my question? Thank you

https://codepen.io/Mahabub-Hossain-the-selector/pen/WNYPawo sorry,, I'm a newbie.. please take this example and sticky the columns as normal css do with smooth scroll. Thank you

Hello Experts, I'm new with Gsap. I'm facing a problem that I can't solving. I'm working on a frontend project with html, sass, bootstrap and jQuery. For animation, I'm using Gsap. I've a section, where it has three unequal columns. Now I want to position them sticky. If I remove scroll smoother plugin, then sticky working perfectly. But If I add scroll smoother, then it's not working. In that case,, how can I use both scroll smoother and also position them sticky. This is my current codes which has so many problems,, it's overlapping the bottom section ``` if (device_width >= 1200) { if ($(".banner").length > 0) { const metaElement = document.querySelector(".banner__meta"); const sidebarElement = document.querySelector(".banner__sidebar"); gsap.to(metaElement, { scrollTrigger: { trigger: metaElement, start: "top-=160px top", endTrigger: ".banner", end: "bottom bottom", pin: true, pinSpacing: false, markers: false, }, }); gsap.to(sidebarElement, { scrollTrigger: { trigger: sidebarElement, start: "top top", endTrigger: ".banner", end: "bottom bottom", pin: true, pinSpacing: false, markers: false, }, }); } } ``` where .banner is parent and .banner__meta, .banner__content and .banner__sidebar are the uneual columns,, I want to position them such a way that normally css do. I'll be thankful If anyone help me about this. Thanks in advance.