Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Balslev's Achievements



  1. 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.
  2. 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(); } }
  3. 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() }); }
  4. 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