Balslev

Thanks again for the reply. Sorry about the close() function confusion, i simply typed close to make it shorter for the troubleshooting in an earlier post. The correct name is indeed closeDragMethod(). I am glad my approach is correct! By setting the callbackScope to my mainObject... will that do anything, or is it more of a "this is the most correct way to do it" approach? I look forward to implementing more awesome Greensock features in our app, and i expect us to join Club Greensock soon, to take advantage of the awesome morphing features.

Thanks a lot to you both. I had hoped i could explain myself properly without creating a demo, but not understanding all the terms, make such an endeavour difficult... I did make it work, but as i wrote, properly not correctly. If i use your example Blake, this.close is simply not being called, nothing happens. If i type it like this: this.close() i get a Runtime Error this.close is not a function If i however type this at the beginning of my function, a function which creates the Draggable, and then uses Tween to animate, then it works: let mainComponent:MainComponent = this; The whole function is here below, this actually works (trial and error), but i would love to make my code even better. This definately feels slightly hacky! updateZone(zone:number, e:any) { let selectedElement = undefined; let sensor = this.zcon.assignedSensorId[zone]; if(sensor && !this.dragNdropModeActive) { this.dragNdropModeActive = true; this.dragFromThisZone = zone; if (e.target.nearestViewportElement.classList.contains('draggable')) { selectedElement = e.target.nearestViewportElement; this.getRect(selectedElement, e); this.renderer.addClass(selectedElement, 'dragging'); let options = false; let scale = 0; let x = 0; let y = 0; let mainObject:ZoneControlMain = this; // THIS IS THE WAY I CAN ACCESS MY FUNCTIONS IN TWEEN CALLBACKS this.draggableZ = Draggable.create(".dragging .z-component", { onPress: function() { if(!options) { options = true; scale = this.target._gsTransform.scaleX; x = this.target._gsTransform.x; y = this.target._gsTransform.y; } }, onDragStart: function() { console.log("Drag start..."); }, onDrag: function() { const trashCanDropArea = document.getElementsByClassName("trashcan"); if (this.hitTest(".trashcan", "10%")) { if(!trashCanDropArea[0].classList.contains('highlight')) { trashCanDropArea[0].classList.add('highlight'); } } else { if(trashCanDropArea[0].classList.contains('highlight')) { trashCanDropArea[0].classList.remove('highlight'); } } if (this.hitTest(".draggable", "70%")) { console.log("SWAP"); } }, onDragEnd: function() { if (this.hitTest(".trashcan", "10%")) { TweenMax.to(this.target, 0.2, { opacity:0, scale:0, onComplete: function() { mainObject.closeDragMode(); // USING THIS ANGULAR COMPONENT TO ACCESS FUNCTIONS OTHERWISE NOT KNOWN TO GREENSOCK } }); } if (this.hitTest(".draggable", "70%")) { console.log("SWAPPED"); } var tl = new TimelineLite(); tl.to(this.target, 0.2, {delay: 0.2, x:x, y:y, scale:scale}).to(this.target, 1, {delay: 0.2,opacity:1, ease:Power2.easeInOut}); } }); } } else { this.closeDragMode(); } }

I managed to fix it... it does feel wrong, so if anyone have a better/more smooth way to do it, i would love to know. I apply my angular component to a variable first, and then i use that variable to access all my angular functions. Is this really the way? update() { // here i apply my component to a variable let mainComponent:MainComponent = this; // mainComponent (aka the whole component) is available for use, and the Angular methods are available TweenLite.to(this.target, 0.6, { opacity:0, scale:0, svgOrigin:"0 0", onComplete:mainComponent.close() }); }

Greetings Greensock community I have a "simple" question, which i cannot for the life of me figure out on my own. In Angular, i have several methods in my component, it could be "closeEverything()", normally i call such function with "this.closeEverything()". Now, when i try to call such method in a TweenLite.to onComplete callback, it says undefined function. So far so good. Greensock does not know anything about the Angular scope, and i reckon Angular does now know anything about the Greensock scope. Now from what i have read, i might be able to change the scope Greensock uses in the onCompleteScope property, but i have not been able to make it work. Does anyone have an example, where out-of-scope functions are being called in Tween callbacks? What is it i am missing, i feel like a complete newbie again, trying to implement this otherwise awesome library into my existing Angular application. /Balslev