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`

See the Pen OJZeQZL by 7linternational (@7linternational) on CodePen

@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!

See the Pen OPNOgM by netgfx (@netgfx) on CodePen

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.