jash

I try to figure out how to get MotionPathPlugin and PixiPlugin working together. Following code doesn't work by getting an error: gsap.to(target, { motionPath: [ {pixi: {scaleX: 0.8, scaleY: 0.8}}, {pixi: {scaleX: 1, scaleY: 1}}, ] }) // results in this error: Uncaught TypeError: target.getAttribute is not a function Another possibility I tried didn't work as well: gsap.to(target, { pixi: { motionPath: [ {scaleX: 0.8, scaleY: 0.8}, {scaleX: 1, scaleY: 1}, ], }, }) // results in this warning: gsap-core.js:83 Invalid property motionPath set to (2) [{…}, {…}] Missing plugin? gsap.registerPlugin() What worked, but therefore I do not need the PixiPlugin anymore (and losing the benefits, to have only one tween, when i.e. animating the alpha as well) gsap.to(target.scale, { motionPath: [ {x: 0.8, y: 0.8}, {x: 1, y: 1}, ], }) What do you say? Did I miss something, or is there currently no support to make use of the PixiPlugin within the MotionPathPlugin? Best regards – Matthias

I came up with following solution to not manage gsap imports manually. Ok you have to do it one time only ... And if you don't need Animate anywhere in your code, there should be no gsap codebase in your compiled js file. import {gsap} from "gsap"; export class Animate { static to(targets: gsap.TweenTarget, vars: gsap.TweenVars): gsap.core.Tween { return gsap.to(targets, vars); } // ... wrap other gsap-methodes like above if needed } Then you can use it like gsap, but your import of Animate should be done by IntelliJ automatically: import {Animate} from "Animate"; Animate.to(myElement, { x: 100 })

Thanks for your quick and detailed answer. To make gsap globally is a handy solution, but it breaks a bit of a module bases approach of bundling only requires modules via imports. But you know gsap is always needed Currently I'm not sure if I prefer string based easing definitions. It is easy to make mistakes (misspelling) and you need to know how exactly the ease is named. If you work in a typed environment with intelligent code completion it is much more easy, self-explaining and safer to use static classes (likeSine.easeOut) to define the ease of a tween. All mistakes will be visible in the IDE or at least during compilation.

Hey and congrats to the V3 release! I'm using TypeScript with IntelliJ IDE, which has a fabulous support for auto importing of classes. I was in big hope that your will release "native" TypeDefinitions (which you did!), that will boost my workflow as i know from other libraries. This means, that you do not have to manually write each time import {gsap} from "gsap" by yourself, but that this import statement is managed/added automatically, when writing gsap.to... But sadly, it doesn't work. I still have to add this import statement by myself every time I use gsap. I added 3 screenshots to get this problem more visualized. You see, that all gsap related objects/classes are unknown to the IDE (but they should cause of the TypeDefinitions), but other library objects are known and a correct import statement is suggested (or added automatically). Also, adding the d.ts files to the tsconfig.ts doesn't solve that problem. It removes the error in the IDE, but it throws a compile time error, because the import is still missing. If it helps, I can create a little example of an IntelliJ project. Best regards Matthias

Is there something on your roadmap to implement a scope-argument (optional) to the killDelayedCallsTo? Finally it was easy to fix some "strange" behaviors in my game, after realizing the problem with the scope. But until that, it took me some time BTW: The above example works great, but you need to use callbackScope instead of onCompleteScope.

Thank you for all your answers. @Jonathan: currently i work with pixi.js (WebGL-Renderer). The drop of the frame rate belongs to the execution of JavaScript (CPU). Its not a render-issue (GPU). The frame rate drops, even with no particle displayed on stage. @Jack: i know GSAP is super fast. On desktop- and current mobile-devices my app runs perfect with 60 frames per second. I just try to figure out to optimize the game on older mobile devices Finally i think, even a "pure" calculation of bezier-values, would seriously decrease the frames per second on older devices. I'll try to precompute all values ... best regards

Formatted console logs. Very nice thank you for that hint to use TweenLite/Max to get the values i need. In my case i want to keep the used codebase as small as possible, that is why i don't want to use TweenLite/Max. Maybe even the BezierPlugin is already to much. Actually i used TweenMax for animating tons of particles. On the iPhone 5 the frame rate drops down to 35FPS, but if i update all particles directly within a render-loop, frame rate increases up to 60FPS. But this was just a quick performance-test with a much simpler, linear transition. So, there is not a direct access to calculate that values from a bezier-object?.

Hey – is there a possibility to get a specific value from the BezierPlugin like this: var bezier = BezierPlugin.bezierThrough([{x,y}], curviness, ...); var value = bezier.getValue(progress) // progress is between 0 and 1 console.log(value.x); console.log(value.y); Best regards

Thank you for your really good answer. Both solutions working perfectly. Setting "liveSnap: true", will snap the pixels also during dragging. So i think with "snap" and "liveSnap", there is no need for a special property "roundProps" for Draggable. Maybe just a little hint in the documentation would be helpful (keywords: whole pixels, pixel-snapping, roundProp,..)

Hi, simple question: How can i tell a Draggable that all values during dragging and during throwing are rounded values. During dragging it seams that it uses rounded values already, but when it came to the second part, where a tween for throwing takes control, the values are not rounded anymore. This leads to blurry text or little gaps i.e. between images (translate3D(23.3234233, ...). I know i can request the tween (via draggable.tween), which is created after onDragEnd, but i have no chance to set roundProps to a tween instance which is already created? In my view, the easiest solution would be to have a roundProps-properties to set via the vars-object when creating a Draggable. Draggable.create("#yourID", {type:"x", throwProps:true, roundProps:["x"]}); Thanks.