Roman Baranov
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Roman Baranov
-
-
2 hours ago, GreenSock said:
Because the browser doesn't scroll in exactly 1px increments. For example, the ScrollTrigger's end position may be at 500 and the user is at 498 and then scrolls really fast so that on the next update the scroll position is actually at 515. On that update/refresh of the screen of course ScrollTrigger will fire its onLeave (as it should). It's not a bug - it's just that you shouldn't write your code assuming that when a callback is fired, it will be EXACTLY that end scroll position.
If you have logic that requires that end position, you could certainly reference self.end if you'd like.
I don't understand your question. Can you elaborate please? Are you saying you want it pin it for a longer span, making the whole page longer or something? And are you asking how to turn on the scrub feature?
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.
See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen
-
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
-
1
-
-
16 hours ago, Cassie said:
I'm afraid I'm a bit lost here as well.
The SVG has quite a high width and height value specified on it, so if the issue is layout breaking that may be something to look at?
If you're struggling to explain in words, maybe you can draw a diagram? Sometimes breaking down the steps gives you an idea of where to start.https://disk.yandex.ru/i/yqKnOfouxYEPzQ
Maybe I should split SVG
-
4 hours ago, Cassie said:
I'm afraid I'm a bit lost here as well.
The SVG has quite a high width and height value specified on it, so if the issue is layout breaking that may be something to look at?
If you're struggling to explain in words, maybe you can draw a diagram? Sometimes breaking down the steps gives you an idea of where to start.I can show video motion of this, later I try to draw a diagram
-
1
-
-
5 hours ago, elegantseagulls said:
Hi @Roman Baranov,
I'm not quite sure what you're looking to do, but you may find it advantageous to set an overflow hidden on the container you're pinning and and move the SVG inside of that, so that way you won't have any horizontal scroll bars. My guess is that you'll need to use multiple pins and scroll triggers to get the full effect you're looking for. I'd stay away from scrollLeft, generally, as that often complicates things for users with wheeled mice.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?
See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen
-
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.
-
13 hours ago, ZachSaucier said:
It looks like you might be using Locomotive Scroll? So is your question how to kill the Locomotive Scroll instance? It has a .destroy() method if so.
If that's not what you're looking for I don't understand what you are looking for. A demo would help us understand and better be able to help.
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
-
21 hours ago, ZachSaucier said:
Hey Roman and welcome to the GreenSock forums.
It's really hard to debug blindly. Can you please make a minimal demo of the issue?
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
Different values of pageYOffset onLeave in ScrollTrigger
in GSAP
Posted
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
See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen