7linternational

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.