Kenner Stross

Yes, that was it. Thank you!

I'm getting an error when trying to call draggable.update(boolean, boolean) - it says there is no such function. I went to an existing gsap code pen and made a quick modification just to see if the function can be invoked. You'll see the error on the console; same message I'm getting in my app. var d = Draggable.create("#child", { type: "scroll", edgeResistance: 0.5, inertia: true, trigger: ".box", }); d.update(false, false);

Thanks, Zach - the svg performance link gives me much to think about. Regarding canvases: I'm not really familiar with them. Before I spend any time investigating, I just want to make sure that canvas + gsap are compatible; I assume so. If have any canvas links you find useful, please don't hesitate to share.

Oh... and I should mention that the paths are bezier curves.

First, let me apologize for not having a codepen, but this is an issue deeply enmeshed with a large body of code, and I don't believe it's something I could recreate on codepen. So... I'll just hope that you might have some advice to share. I am using the DrawSVGPlugin to do this type of animation: Imagine a grid of cells on the left half of the screen (a 13 x 13 grid). Emanating from some of those cells are little snake-like, squiggly lines that seem to flow over and into a point on the right side. Each of the squiggly lines is an svg path, and I'm using DrawSVG to go "0% 100%" so the snakes emerge and start moving across the screen, and then "100% 100%" to make them look like they are all arriving and finishing up (being swallowed into, sort of) that final end point. It works GREAT! But... it works great only if I don't have too many snakes coming out of too many cells. It seems (???) that if I have a whole bunch at once (it could be as many as all 169 cells are emitting at once), everything goes haywire: jerky; screen flashing; portions of the grid itself going blank and coming back; other portions disappearing; the screen not responding; snakes flashing on and off; etc. Totally haywire. It would seem like maybe I've crossed some sort of threshold of what gsap can handle and/or the browser can handle and/or some memory limit or ??? I don't really know how to structure my question, so I guess I'll just ask if anyone has general advice re: the performant use of svgs, performant use of the DrawSVGPlugin, limits and thresholds I should be aware of, Chrome debugging tips (I'm not particularly expert in that area), etc. Anything would help. Thanks in advance.

Perfect - thank you both!

I would like to be able to scatter labels through my timeline (no problem, so far!), and then go into reverse mode and play backwards to one of those specified labels - rather than playing backwards all the way to the beginning. Likewise, I would like to be able to play forwards in a similar fashion - only up to a specified point. Is this possible?

Yes, thanks Jack - it's all starting to make sense to me now.

I have a very, very simple svg set up to test and understand the DrawSVG plugin. It's just a line, and I'm just trying to reveal the middle portion of the line. But... what I see are series of dashed lines. Clearly I'm misunderstanding something. If anyone has insight into what I'm doing wrong, I would greatly appreciate hearing from you. Thx

Actually, I found the problem. I was looking a the portion of generated js code that might be helpful, and it made me think of something. The answer (I believe) is very specific to Scala JS, but I'll post it here in case someone else runs into this. My original help function built a gsap options structure inside another gsap options structure. Because of the way the javascript code was generated, that became a function call within a function call, which looked weird to gsap (for reasons that are above my pay grade). When I restructured it to get rid of the nested function calls, it worked fine. Here's the revised version of the Scala JS help function: def physics(dur: Double, vel: Double, ang: Double) = { val po = new GSAPPhysicsOptions { override val velocity = vel override val angle = ang } new GSAPOptions { override val duration = dur override val physics2D = po } } And if anyone is curious, here is the generated javascript that made gsap unhappy (before refactoring it as shown above): $c_Lanim_AnimHelpers$.prototype.physics__D__D__D__Lanim_Facades$GSAPOptions = (function(dur, vel, ang) { var po = (function(arg$1, arg$2) { var prep0 = $uD(arg$1); var prep1 = $uD(arg$2); var vel$1 = prep0; var ang$1 = prep1; var $this = {}; $this.velocity = null; $this.angle = null; $this.velocity = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(vel$1); $this.angle = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(ang$1); return $this })(vel, ang); return (function(arg$1, arg$2) { var prep0 = $uD(arg$1); var prep1 = arg$2; var dur$4 = prep0; var po$1 = prep1; var this$2 = {}; this$2.duration = null; this$2.physics2D = null; this$2.duration = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(dur$4); this$2.physics2D = $m_sjs_js_UndefOr$().any2undefOrA__O__sjs_js_UndefOr(po$1); return this$2 })(dur, po) }); $c_Lanim_AnimHelpers$.prototype.init___ = (function() { $c_O.prototype.init___.call(this); $n_Lanim_AnimHelpers$ = this; return this });

Thanks for the reply, Zach. I don't think codepen is going to work because, in reality, this is Scala JS code which transpiles down to Javascript. I'll show you the (scala code) helper function I'm using, though it may not make sense to you if you're not familiar with Scala and/or Scala JS. But just in case: def physics(dur: Double, vel: Double, ang: Double) = new GSAPOptions { override val duration = dur override val physics2D = new GSAPPhysicsOptions { override val velocity = vel override val angle = ang } } It's just a little helper function to build the javascript structure that gsap needs on the "to" call. But before we get too concerned about whether this sort of Scala to Javascript approach works, please understand: 1) It works just fine for all my other calls to "to" and "set," etc. It only gets weird when it includes the physics2D reference. 2) It's warning that it doesn't like something about "ang" and/or "angle," yet THE ANIMATION WORKS!! In other words, the angle that I am passing in is, in fact, being honored by gsap! That's the part I don't understand - how can it simultaneously say that it is a bad param AND honor/utilize that param? It seems like it's either a bad param and therefore no effect on the animation OR it's a good param and no warning. But both?!?

I've installed the physics2d plugin and I have a simple animation that is working, yet I'm getting many warning like this: Yes, I register the plugin. And no, I'm pretty certain there is no tree shaking because this is not inside a build environment or deployment container or anything like that - it's just a simple html page. Any ideas how a plugin could both work AND generate these warnings as if it was not working, not loaded?