Bartzel

Interesting indeed, thanks! I did manage to get it working, with the getVelocity() and by removing the onEnter animation. Also I've changed the transforms to gsap.to animations. Now that the scroll direction is controlling the animation, it seems to work as expected.

Update; with a bit more research, I found out that ScrollTrigger returns to its OnEnter state after React fires a re-render. Any idea how to keep it from doing that?

A demo will be quite hard, as there's a lot of other elements and code that surround this. It may also just be React, triggering a re-render and the ScrollTrigger going back to it's initial state. As for the transforms; i initially had a separate tween, which I called in the ScrollTrigger. This resulted in very buggy behaviour, probably because it's based on scrolling up or down. Tweens where abruptly overwriting each other. For some reason, it works fine with the transforms. I'll look into the velocity, thanks!

Good day! I have a pretty simple ScrollTrigger setup; where a bar with sticky titles animates up or down, based on the scroll direction. But there's a small bug / unwanted behaviour in it: when the content changes (certain elements can be removed), even if it's less than a pixel, the ScrollTrigger fires and the header bar moves up. Is there any way to add a threshold of some sort? This is what i currently have: const headingScrollTrigger = ScrollTrigger.create({ start: '400', end: 'max', scrub: 1, fastScrollEnd: true, onEnter: () => gsap.to('.compare__heading-container', { duration: 0.5, ease: 'sine.out(1.7)', y: 60, opacity: 1, }), onLeaveBack: () => gsap.to('.compare__heading-container', { duration: 1, ease: 'expo.out', y: -210, opacity: 0, }), onUpdate: (self) => { if (breakpoint >= 4) { self.direction === -1 ? (document.querySelector('.compare__heading-container').style.transform = 'translateY(120px)') : (document.querySelector('.compare__heading-container').style.transform = 'translateY(60px)'); } }, });

Figured it out! Simply resetting the transform: matrix(####) back to the original values does the trick! I was messing around with the clearProps: all, which gave some really odd results. Works just fine now!

One last question; since the X / Y / CX / CY are no longer being used, how would you reset the items to their original position? I used to do this by animating the X, Y etc. and the circle radius back to the original positions and size. This still seems to work, but after the reset, weird stuff starts happening while dragging and resizing (the line moves in a totally different direction and the right dot is outside of the circle). I editted the CodePen to show what i mean:

That's awesome, thanks a lot! I hope this will be ok with the client. They can be quite a pain in the #ss... I'll try my best to convince them, as this works much better. And try to make them greedy bastards get a Greensock plan Thanks again!

Hahaha, yeah... it turned out to be quite a complex thing in the end. Reason it has so much code, is because i want to set as much as possible in the JS. There will be many copies, once it all works like it should, and this way you can set most of the stuff up using the top variables. As for the dragging functionality and calculations, i don't even understand half of it but i've been messing with it until it worked That's also why i was hesitant to create a codepen. In the end, i don't think it has to be an overly complex solution. If only i can acces the parent <g> and apply the bounds somehow...

Thanks! I stripped it down a bit and it's good enough for an example The right dot will increase the size of the circle and with the line or center dot, you can drag the group. This is where the bounds only apply to the element that's currently being dragged. I would like to extend this to the group. It can be found here:

Good day! I have a <g> element with several SVG stuff in it; a line and 3 circles. Depending on what's selected, different stuff happens. When you drag the line or the left circle, all other elements are moved with it. This works great, but the bounds are still only on the currently dragged element and all other moving elements will go right thru the bounds. What i would like, is something like: this.target.parentNode.applyBounds('#stage'); But this returns an error (applyBounds is not a function). If i console.log this.target.parentNode, it does show the correct <g> element. How would i get it working?