7linternational

One more question if you please. Is Draggable.hitTest(draggedElement, someOtherElement) the same with draggable.hitTest(someOtherElement) ? I mean will they produce the same result?

Ok so this is a continuation of my previous post (that was resolved) The problem now is that when the item that exists below the fold (you have to scroll to reach it), when dragged the draggable on the `move` function will correctly resolve hitTest versus other containers, but on dragEnd it will not resolve hitTest correctly. Other list elements that are above the scrollbar correctly resolve hitTest on both `move` and `dragEnd` Here is a sample: https://stackblitz.com/edit/gsap-react-basic-f48716-tc3dev?file=src%2FBoxItem.js (simply drag box 3, 4 over the drop area and release, the hit test resolves correctly, then drag box 7 on move it will fire the hitTest correctly, but when released over the drop-area the hitTest will return false) 2024-01-18 16-51-16 (1).mp4

Awesome, thank you so much! I've been stack at this for hours, but I knew there had to be a solution for something so trivial. GSAP is the best!

When a container is scrolled and set to visible when drag starts the draggable element is offset to the mouse cursor. I created a small demo to show this: https://stackblitz.com/edit/gsap-react-basic-f48716-w6gvjb?file=src%2FBoxItem.js (drag the boxes that are visible after the container is scrolled). Is there a way to avoid this behaviour? The reason that I'm doing the overflow: auto/visible is that the draggables cannot be dragged while the overflow is auto or hidden.

Hello! So I have a scenario where I have a draggable of size 250x250 and when I drag it, I pass a class that converts it to 150x150 pixels (width, height), however when I do `draggable.hitTest("#someelement", "50%")` first of all it doesn't match although visually the elements overlap, and when I print the boundingClientRect of the draggable instance it prints `250` for width and height. I'm doing this.update onPressInit but it doesn't change anything. Is there a way to update the bounds of the draggable instance after the drag initiates or onDragEnd? onPressInit: function (ev) { console.log(draggable, this); this.target?.classList.add('intransit'); this.update(true); },

Thanks I'll try it out, I want the draggable background to also move its containing children (think of how figma or miro, drag the background to move everything, but each thing is also movable), so the trigger might do the trick.

Hello, I was trying to have a background area being draggable (like a large canvas) and on top of it have draggable children. But when I drag the child the area gets dragged as well. Any ideas how to separate them? Should I check if the mouse is hovering over the child boundaries and disable the area drag or is there another way? https://codesandbox.io/s/gsap-3-draggable-plugin-forked-pwibg0?file=/src/Area.js:702-953

Thanks, no particular reason, it probably was like this when I forked it. Thanks! Any particular reason why the circle with the pause Rect is out of position? Is the animation overriding styles?

Trying to tween the opacity of a path like gsap.to(play,{duration: 0.25, opacity:0, delay: 0.20}) but the path won't disappear for some reason. I also tried via `#play_btn`

@mikel Thanks for the help, one more thing if you don't mind, is there a way to control the pace of the animation using mouse wheel scroll? I believe gsap recently launched a new plugin but not sure if it can be combined with DrawSVG.

I think I've somewhat did it with var line1 = MotionPathPlugin.convertToPath("#line1", false); gsap.to("#dot", { duration: 2, ease: "linear", motionPath:{ path: line1[0], align: "#line1", //autoRotate: true, alignOrigin: [0.5, 0.5], offsetX: 138, offsetY: 0 } }); but it requires offsetX and Y, I thought that it would align out of the box, is there something wrong with what I'm doing?

I'm trying to combine MotionPath with DrawSVG in the sense that I have a div that I want it to be placed on the tip where the svg path is drawing (like the div is drawing the lines. Is this possible? thanks in advance!

Hello, I have a tween that appears on click of an object fades in and starts to rotate infinitely with repeat = -1. When I kill that tween and then re-click the object and and the tween re-starts it adds to the duration from the previous tween, so everytime I click and it begins to rotate its duration += previous-duration+duration Code that fades in and starts to rotate object TweenMax.to([".planet1UI>img"], 0.8, { autoAlpha: 1, delay: 1.5, onComplete: function() { TweenMax.to(".planet1UI>img", 4, { rotation: 360, ease: Linear.easeNone, repeat: -1, transformOrigin: "50% 50%" }); } }); code that removes the rotation TweenMax.set([".planet1UI>img", ".planet2UI>img"], { autoAlpha: 0 }); TweenMax.killTweensOf([".planet1UI>img", ".planet2UI>img"], { rotation: true, transformOrigin: true }); TweenMax.killChildTweensOf(".planet1UI"); TweenMax.killChildTweensOf(".planet2UI"); TweenMax.killAll(); So every time I restart the rotation it is 4seconds slower Any ideas? I will add an codepen soon.