AlexandrWD

I want the menu to look like this when opened anywhere on the page (1 screenshot) And now if you open the menu at the topmost point, it looks like this in the 2nd screenshot

I fixed my Codepen You have to watch it in mobile resolution

I apologise if I'm asking too stupid questions, I've just started learning GSAP and it's hard for me to understand all the intricacies of the plugin. When scrolling the page I have the header fixed, everything is fine there. At a resolution of 1024px and less I also have burger menu. If you scroll below and open the burger menu - everything is fine. But if I click on the menu at the top of the site, the header stays in place. I would like to clip the header cap to the top when the menu is open and when I scroll down it. How can I do this? P.S. I apologise for grammatical errors, I use DeepL for translation. Link to the website for the tests: https://mifar.ru/

Great! horizontalSections.forEach(function (sec, i) { var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); var getToValue = () => -(thisAnimWrap.scrollWidth - thisPinWrap.offsetWidth); gsap.fromTo(thisAnimWrap, { x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue() }, { x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0, ease: "none", scrollTrigger: { trigger: sec, start: "top top", end: () => { return "+=" + (thisAnimWrap.scrollWidth - thisPinWrap.offsetWidth); }, pin: thisPinWrap, invalidateOnRefresh: true, scrub: true, } }); }); Instead of the page width, I used the container width...

When using a resolution of 2048x1080 and 3840x2160 the animation on the first block starts to "jump" and does not work. I assume it's because the end of the animation is many times the size of the scroll. Can you please tell me how to fix this?

Thank u!

I need to nail the blue block to the ceiling, but because the content has a transform property, fixed(blue block) starts to display from the highest point of the site, not from the ceiling of the browser. How can this be fixed?

Yes! Thank u!

Hi! Can you please tell me how to make smooth scrolling, so that it works together with horizontal scrolling. And how to make a horizontal scroll to the last block (not in %) regardless of the number of blocks and screen width?