Roman Baranov

I want set position fixed on SVG when sections scrolling horizontally, and set it absolute every time, when section scrolling vertically. onEnter horizontally I calculate position of absolute element and set it for fixed onLeaveBack horizontally I set position absolute, and get initial value of top position onEnterBack horizontally I set it to fixed and calculate position for all onEnter and onEnterBack I get inaccuracy between self.end/start and pageYOffset and I get values that I need, it's work good but onLeave I got wrong values everytime I have inaccuracy in one value depends on viewport width I'm bad in english and in explaining my thoughts even in native language, I'm update codepen and hope it's better for understand my problem, SVG jump onLeave horizontal scroll https://codepen.io/baranovroman/full/RwpQMYK

Thank you very much, self.end it's exactly what I need, but I still have some trouble, I want to check element.getBoundingClientRect().top onLeave callback, which calculated different every time, can I imagine something with this? About second part of question, I will try, if it does not work, then I will reformulate the question. Maybe I can get offset between scroll position and self.end, and calculate inaccuracy, and use it for boundingClientRect?

Hello everyone, as always I'm happy and grateful to use GSAP. I'm trying to calculate position for switching position from fixed to absolute and back again, and I have different values every time, why it's happening? And can I change something to avoid this? I'm logging this values, for better understanding - open codepen in new tab with console open Also, how can I add more pining for last section? I need to add scrub animation.

So, I found something, for big decoration like this, you should use ScrollTrigger callbacks, and switch fixed and absolute position, when I finally do it, I may post this on codepen

https://disk.yandex.ru/i/yqKnOfouxYEPzQ Maybe I should split SVG

I can show video motion of this, later I try to draw a diagram

But I need start showing SVG after first screen, after show some text content, and only after that pin sections horizontally, I think overflow broke SVG outside of container

Hello everybody, I need pin some decoration on sections with vertical at first, and fake-horizontal after some time, I found how I can do horizontal scroll, but I don't know how to pin decoration, pinning section horizontally make height of section really big, maybe I should do this with scrollLeft?

Thanks for reply, yeah I'm also think it's not possible, just think maybe someone have any ideas.

Hello everyone, have a little problem, when you are scrolling first screen on mobile, browser hide interface, and it's a resize, so while you are scrolling, animation OK, but when you are stop - animation recalculate without any transition. I know it's not a bug, it's a expected behaviour, but what I can do with it? Example - https://495.vodka/ section with a plane with cloud, sorry it's not a codepen, but I think it's more comfortable from mobile, if need can do something on codepen.

Im use barba first time, and i think my scripts failed w/o errors on console, and locomotive doesnt destroy because script failed before destroy, and I get some scrollTrigger errors, and think I need destroy locomotive scroll and scrollerProxy, thank you for help, i'm just confused, but now I found reasons why I get this errors

I'm not sure, how i can use barba on codepen, where shoul redirect links, but i don't ask for debug, main question its how i can fully destroy script for scrollerProxy

Hello everyone, thanks guys for gsap and all about it. I use barba + locomotive + gsap on my project, i try to destroy all ScrollTriggers with ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); But i have some errors from ScrollerProxy, and i think my code doesnt destroy all ScrollTriggers, especially scrollerProxy. There my code for scrollerProxy, almost duplicate from docs if (scrollContainer) { window.locoInstance.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? window.locoInstance.scrollTo(value, 0, 0) : window.locoInstance.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: scrollContainer.style.transform ? 'transform' : 'fixed', }) } There error Uncaught TypeError: Cannot read property 'scroll' of null at ScrollTrigger.scrollTop [as scroll] at _updateAll Sorry for my english, sorry it's not codepen, and if it's something stupid, i just tired and don't know why and how to fix this, thanks