Keaton88

I have a timeline consisting of tweens that change an SVG text element. The text element begins with a value of 400. The first tween will change the text content to 300, the second tween to 200, and the third and final tween to 100. When the page is finished loading, instead of showing the initial value the text element is set to (in this case 400), it shows the value the element will be set to by the FIRST tween (300). Not the final tween, (100) nor the middle tween (200), but the first one. How do I ensure that when the page is loaded, the target elements to be tweened are set to it's initial values BEFORE playing the timeline, and not any of it's future values to be set later?

Hi. I've been stuck for a while on this. The goal is to tween a bubble coming from one circle to another circle while having a 'goo' effect at the exit and entry points. For the filter to have effect, I must place the bubble circle within the starting circle's group, then at some point before the bubble finished following it's designated path, remove it from that starting circle's group, apply the filter to the end circle, and append the bubble to the end circle's group. Does anyone have any thoughts on how to do this while maintaining a smooth animation?

I solved the problem. Prior to calling the Draggable.create function, you reference the "this" keyword in a local variable like self. For example initDraggableItem_Characters() { let self = this; // references the angular 2 "this" Draggable.create('.itemDrag', { edgeResistance: 1, autoScroll: 1, liveSnap: false, throwProps: true, onPress: function () { this.activeCharacterType = self.getActiveCharacterType(this.target.id); // angular 2 function call this.startX = this.x; // greensock's this this.startY = this.y; // greensock's this .......

Hi I'm building and angular 2 app that uses greenaock's draggable features. Both angular 2 and greensock utilize the reserved word "this" to call functions. When the onPress function is called on an Draggable item, I'd like to call an angular 2 function which is done by using "this.functionName()", however I am not able to because "this" is currently pointing to greensock's object. Is there a work around for this? Thank you

the this.dragging is on the component and not in the dragging instance. it's a drawing application which cleans up the image to one of a set list of characters, based on what you draw, the dragging aspect is to place them in the correct location as i do not expect the users to draw them exactly where they are needed from start to finish. sending a PM with a link to the application. please let me know if this helps explain the problem.

Hi, I have a weird behavior happening with the Draggable utility. my project has the drag being set dynamically after i morph the svg path, into the correct structure. (building this with Angular2 and Typescript, PM for a link to the site. it is not in codepen but will be very easy to see the code in app.component.ts) el is equal to the element which was just created. Draggable.create(el, { type:"x,y", edgeResistance:0.5, bounds:document.getElementById("canvas"), throwProps:true, snap:{ x:function(endValue:number){ return Math.round(endValue/10)*10; }}, onPress:()=>{this.dragging=true;}, onDragStart:()=>{}, onDragEnd:()=>{ this.dragging=false; } }); after the element is created it's fine, but if i drag it there is a slight shift over to the right of about 25px. if i draw new elements the new element gets the shift, and the others work no problem. it's always the last element drawn which shifts. was wondering if anyone else has had this experience. Any help would be greatly appreciated.