Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Keaton88

  1. 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?
  2. Hi

    I'm creating an angular application with svg elements that at times can generate hundreds of gsap animations.  Our load time is becoming a bit long (over 2 minutes at times).  The number crunching is not holding up the program but rather the generation of the animations. Our progam animates events throughout a person's lifespan. Each year of a person's life can have any number of animations. Ideally, to have the animations for each year sent to a separate thread (web worker) would be great but I know we can't reference dom elements there.  Does anyone have any suggestions  how we can speed up our load time? 

  3. 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?
  4. 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 .......
  5. 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
  6. 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.
  7. 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.