Jump to content
GreenSock

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

Keaton88

BusinessGreen
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

1 Newbie

About Keaton88

  • Rank
    Newbie

Recent Profile Visitors

1,272 profile views
  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 tweene
  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 t
  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(endV
×