garyw

Here's a codepen: https://codepen.io/og-elmonty/pen/poOVVYe

I also tried this, but it still doesn't work: const draggables = Draggable.create(draggersArray, { snap: function(value){ console.log(value); return point; } });

I'm trying to use a snap function with Draggable. The snap property is not listed in the list of configuration properties in the documentation. I've found examples of using it but the function never gets called. const draggables = Draggable.create(draggersArray, { snap: { points: function(point){ console.log(point); return point; } } }); I made sure to register the Draggable plugin, and I can start dragging items. But when I let them go, the snap function isn't called.

SOLVED: I have the wrong case. It should be force3D.

I removed all the v's and h's and I am still getting sharp bends: https://codepen.io/og-elmonty/pen/dyvOyKX

Thank you both for your help. I have made the number of anchor points the same in the start and ending paths. It really helps, except with this one: https://codepen.io/og-elmonty/pen/dyvOyKX

I am trying to animate a cable with a plug using MorphSVG. Morphing both the cable and plug as one path gives distorted results, so I separated them. However, they do not animate together correctly. How can I sync these animations so that the plug stays on the end of the cable? I have two more of these types of animations that I need to build. Please see my codepen.

I'll try that, thanks.

getTweensOf() doesn't work if you have tweens on multiple elements within a page and you want to get all of the tweens for the parent page. I would have to keep a list of every element that is tweening.

Keeping track of the tweens within each page would also require me to track their completions and garbage collect them. I don't see any way to have multiple onComplete callbacks (one for any specific onComplete requirement of the tween and another for the page to track it for garbage collection). It would be much simpler to attach attach a tag to each tween and to get a list of all active tweens with a particular tag.

I thought of exportRoot(), but it would include tweens that were created prior to any page, correct? And each subsequent call of exportRoot() would also include the prior ones, right?

I have an SPA app where there can be tweens within each page as well as tweens on the parent shell. Is there any way to tag or group tweens so that I can kill a set of them (for example, all the ones created by a page when the page is unloaded) without killing all of them?

I updated to the latest version and that solved it. Thanks!

Aha, yes! Thank you. I would never have seen that.

I posted one above.

I am creating a Draggable with force3D:false. When I drag the object, it still has a translateZ value. When should it go away? Is there a way I can force it to go away on the onDragEnd event handler?

Is anyone else having trouble forking the GSAP codepen template? There is no Fork button any more.

I'm not trying to convince you one way or another, but I would just like to add this: If you put a general-purpose utility method in a toolbox, you don't know what people are going to use it for. It could end up being used for a number of non-animation purposes, and nobody will question whether they are getting an even distribution of randomness until somebody else notices it. <soapbox>If code size is the primary concern, my personal opinion is that the shuffle method should be removed (unless it is required by something else) rather than return mediocre results. </soapbox>

This is what I use: function shuffle(array) { var result = Array.prototype.slice.call(array); // this method supports nodelists, too. for (var i = result.length - 1; i > 0; --i) { var j = Math.floor(Math.random() * (i + 1)); var temp = result; result = result[j]; result[j] = temp; } return result; }

The new shuffle method uses a common algorithm that is, unfortunately, incorrect. See: https://stackoverflow.com/questions/962802/is-it-correct-to-use-javascript-array-sort-method-for-shuffling https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array http://www.robweir.com/blog/2010/02/microsoft-random-browser-ballot.html

Yes, I am seeing this behavior with this codepen right now. It's Safari 11.1.2 (11605.3.8.1).

https://github.com/jquery/PEP

We use pep.js because we have many types of interactivity in our web app and it needs to work on multiple browsers and devices with and without touch capabilities. It allows us to standardize on one type of input event (PointerEvent) on any browser. In the pen, if I move pep.js above GSDevTools3.min.js, the draggable does not work. If I move pep.js anywhere below that, the draggable works. In my web app, the only GSAP files I have are gsap.min.js and Draggable.min.js. Even if I move pep.js below them, the draggable doesn't work.

I moved pep.js to the top of the JS list in the pen and now the dragger doesn't move at all in Safari.

Okay, I updated the pen. I still see the error: Invalid property - "touchAction" - "set to" - "pan-y" - "Missing plugin? gsap.registerPlugin" init:CSSPlugin.js:991