mothervolcano

For all the paper.js users out there: We found a little simple hack that makes it possible to chain tweens to any paper object property without resetting the values. The trick is to force paper.js to update the tweened property value everytime it is updated. We use a callback function on each time the tween is update and simply pass on the object we want to update using a new object as a "shadow". Hope this makes sense We're a bit in a hurry to finish and deliver the project we're working on but as soon as possible we'll prepare a little demo on codepen and share it with the community. function updatePos( target, param, obj ) { target[param] = obj[param]; } var posValues = { x: 0, y: myPath.position.y } ; TweenLite.to( posValues, 2, { y: "-=200", delay: -1.8, onUpdate: updatePos, onUpdateParams: [ myPath.position, "y", posValues ] } ) );

Actually the issue may not have nothing to do with the overwrite. We have just tried to chain to tweens to the same objects with enough time in between and what seems it is happening is that by the time the second tween kicks in it send the objects back to the starting position they had before any tweens on them started. This behaviour does not seem to happen in the examples you have made for us. Wondering what is happening here. Code excerpt below and pen here: http://codepen.io/mothervolcano/pen/OPPBzb for ( i; i < num; i++) { var d = i * 0.1; TweenLite.to( paths[i].position, 1, { y: "-=250", delay: d } ); TweenLite.to( paths[i].position, 2, { y: "+=250", delay: d + 2, ease: Quad.easeIn } ); }

Thank you so much guys for the amazing support! Really appreciated. It makes us feel we have made the right choice of animation library Here, we have created a pen where the code can be compiled: http://codepen.io/mothervolcano/pen/GggYog (thanks for showing it to us) I have also included the real context we're using the tween. We're using it with paper.js. The example provided by @Diaco.AW works like a charm and its exactly what we're trying to achieve. But when applied exactly the same way to the paper.js object it behaves differently as you can see. Just want to confirm with you that it is not something we're doing wrong with the tween before trying to find help in the paper.js forums. paper.install(window) paper.setup('myCanvas') var size = new Size(50, 50); var squareBlue = new paper.Path.Rectangle( { x: 100, y:150 }, size); squareBlue.fillColor = 'blue'; var squareRed = new paper.Path.Rectangle( { x: 100, y: 200 }, size); squareRed.fillColor = 'red'; var t1 = TweenMax.to( squareRed.position, 2, { y: "-=100" ,onOverwrite:report} ); var t2 = TweenMax.to( squareRed.position, 1, { y: "+=50", delay: 0.5 } ); var t3 = TweenMax.to( '.red', 2, { y: "-=100" ,onOverwrite:report} ); var t4 = TweenMax.to( '.red', 1, { y: "+=50", delay: 0.5 } ); function report() { console.log("overwrite > t1 = " + t1.progress() ); }

Hi! Thank you bringing us GSAP and providing such a great support. We are struggling a little with making the overwrite options work the way we understood in the documentation they should work. We are designers and not professional programmers. These are the lines of code we're using to test it: TweenLite.to( basePath.position, 1, { y: "-=250", delay: 0, overwrite: 0, onOverwrite: reTween } ); TweenLite.to( basePath.position, 2, { y: "+=250", delay: 0.5, overwrite: 0, onOverwrite: reTween } ); We don't seem to be able to prevent the second tween from overwriting the first one half way of it. What are we missing or doing wrong? Thank you!