perfecti

Hello, I declare animations in two ways page.js and common.js (animations that are used on different pages) and found that if scrollTrigger (common.js) is declared before the scrollTrigger with pin (page.js) declaration, then the position of the triggers will be shifted. This can only be solved by including the common.js file after all page.js or is there another way?

oh yes its so good, thx. I didn't see preventDefault in documentation

Hello, I started using your new Observer and it's amazing And I was wondering if I can use it to block the scroll in the element until some condition is met? For example, I launch a slider when scrolling through an observer, and I need that until it ends, the scroll is not available now I separately check the scroll through the wheel and stop it with preventDefault

oh thanks, i tried creating it outside of the callback

For example, if I need to animate not one element, as in the example above, but several different ones in a certain sequence

And somehow you can adapt it to the timeline or animation of each element, you need to write it inside onEvents?

Thank you, now it really works as it should, though a bit of a difficult way Yes, I understand that gsap was just doing his job, it's just that sometimes it's not clear how to do such things correctly

Hello, I don't understand how to make different animations for the enter and leave of an element. Now I commented out onLeaveBack, otherwise, if you scroll quickly, the animations start to interrupt each other. Oh onEnter animation too How to solve such problems correctly?

I thought maybe the scrolltrigger can do this behavior, but didn’t know how, so I turned here. I updated the code in the first post, it seems to work well now

I tried to solve like this, delete scrolltrigger, and add wheel event let section = 0; const maxSection = 3 $container.addEventListener('wheel', (e) => { const direction = e.deltaY > 0 ? 1 : -1; e.preventDefault() if (scrollTween) return section += direction; console.log(section) if(section < 0) { section -= direction; return } if(section >= maxSection) { section -= direction; return } scrollTween = true; goToSection(section) }, { passive:false }) its work, but how enable scroll after last section?

Hi, how can I fix my animation to make the scroll look like this slider?

Hi, how can I make the animation, on mouseenter/mouseleave event where the reverse animation is different? my animation turns out to be very jerky if the event is triggered before the animation is complete what is the best way to solve a similar problem? I tried several options, in the last one, if add return, then the animation stops being jerky, but sometimes it stops.

Now I understand your question. I expect that the starting animation will play to the end and only after that the scroll animation will start (if the user has already scrolled by this time, then the element should be animated from the current positionю The current scroll should be the starting one) I tried Zach method, everything seems to be fine. Method Visual-Q good too. https://codepen.io/Speculant/pen/mdOaGVo thanks for the help

I expect that when an element appears, it will have a start animation, and then when it ends, that element will have a scroll animation. But I don’t understand how to implement it correctly. hmm this could really be the solution

Thx for try to help, but disabling scrolling is too annoying, so I am not considering such a solution

Hi, I can't solve this problem. I have an animation when the page onload/element appears, also on the same element there is an animation with a scroll and they overlap each other and the elements jump between two values. How can I solve this? As far as I understand, if these animations are not in the timeline, they will work as was expected