Mike D

One other note, I'm using TimelineLite in my app, and I also used TimelineLite in my codpen - where things are working fine.

Hi all, I'm running GSAP v1.19.x and according to the docs x/yPercent has been supported since 1.13.x. What's strange is I created a codepen with version 1.19.x and it works just fine. The ask here I guess is - what, if anything, in the way of css styles or tween attributes could override or somehow prevent x/yPercent from outputting percentages? Thanks and sorry kind of a random question here.

Thanks Jack. I cleared cached, deleted the `node_modules` folder and reinstalled and am still having the same issue. I'm wondering if the culprit is a collection of custom npm packages that are running gsap 1.19 as a peer dependency. Hmmm...

Hi, I'm getting this error when trying to bundle in webpack. I have read through many posts on these forums pertaining to npm usage and feel I'm up to speed on correct usage. What's interesting is webpack-dev-server is working fine but the issue only crops up with uglify when bundling. Line 4822 = const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope; I'm running webpack 2.2.1 and gsap 2.0.1. Any help is greatly appreciated. - MD

Thanks a lot Carl, I JUST figured it out before rechecking this post.

Hi guys, Does anyone know how to creat the equivalent of this TWEEN function using Greensock? new TWEEN.Tween({ val: 0 }) .to({ val: 1 }, 500) .easing(TWEEN.Easing.Circular.InOut) .onUpdate(function () { // some logic here }) .onComplete(function () { // some logic here }).start(); Thank you.

Hi guys, So I have a "default" class for an element that places it offscreen and ready to be animated in. I remove the "default" class in the tween which works just fine. <style> .myelement { left: 0px; } .myelement.default { left: -200px } </style> TweenLite.to(".myelement",speed, { className: "-=default" }); Now, I have some scaling logic in place that is fired on resize. When resized, the "left" property is updated which now needs to overwrite the ".myelement" left value contained in the element's .myelement class. TweenLite.to(".myelement",speed, { className: "-=default", left: "-300px" }); My guess is that the ".myelement" left value is overwriting the passed "left" parameter. Any suggestions on optimizing this is greatly appreciated. - Mike D

Oh, i didn't realize there was already a plugin for this. Thanks guys!

Hi Jack and crew, Thank you for all the work that has gone into the best animation library on the planet. It's a pleasure to use and the support is stellar. I'm not sure if there is any sort of "suggestion box"... if so, I'd love to put Cubic Bezier support at the top of the list. This would be such a killer feature. Thanks!

Thanks Jonathan! Greatly appreciate the pointers!

The yoyo option looks great, I'm wondering if this was the fix? http://jsfiddle.net/droplab/FCbUz/4/

Good call on the yoyo, wasn't aware of that option. However, I'd like to have the tween fire and then return to x:0,y:0,z:0 The overall concept is these *wedges* are shooting out from the middle and then returning to the center, each time with a random radius/length. Thanks!

Here's a fiddle displaying the issue I'm having. I need to figure out how to have the overlapping tweens transition smoothly without jumping. http://jsfiddle.net/droplab/FCbUz/3/

Thanks for the reply. I actually don't as this piece is buried deeply within the app logic. I can try and create a reduced test case to better illustrate the issue.

Hi, I'm trying to use GSAP to animate objects in a ThreeJS project, within the requestAnimationFrame loop. Obviously this loop is firing much faster than the time it takes each tween to complete. I'm getting lots of overlapping Tweens on each object and I'm trying to figure out the best way to have each Tween run and then run it's onComplete function to tween itself back properly without losing it's references. Would TimelineLite be better suited for this or is there a better approach using TweenLite? Thanks in advance! function animate() { if(animation === true ) requestAnimationFrame( animate ); TweenLite.killTweensOf(object); TweenLite.to(object, 0.5, { x: _radius * Math.cos( num ), y: _radius * Math.sin( num ), ease: Expo.easeOut, onComplete: function(_this,_x,_y) { // animate the object properties back to what they were before we started this tween }, onCompleteParams: ["{self}",object.position.x,object.position.y] }); }

Another observation, if I have the developer tools running I still see the TweenMax error noted above but the page works. If the developer tools are off, I'm getting tons of strange errors (anchor tag event handlers aren't firing, element visibility that is controlled via js isn't set correctly etc.. yet I'm not seeing any other JS errors in the console. I am using a Paul Irish shim for the console object, and I'm seeing all of my debugging messages in the console so I know that's not the issue here. Really stumped on this one.

Hi, I'm simply unable to workaround/fix an error being thrown in IE8 and TweenMax. Using the uncompressed version of TweenMax the error details are as follows: Invalid Argument: TweenMax.js Line 4207 Character 7 Object Expected: TweenMax.js Line 4209 Character 7 My javascript code is: TweenMax.set( wrapper_inner, { "height": settings.scaling.h+"px" }); wrapper_inner is defined via jquery and exists, settings.scaling.h is a valid number.

Works perfectly now - thank you again for the amazing work on this library and the stellar support.

You're a scholar and a gentleman.

Thanks. So i guess then, for any Tween using -= or += with the className property, I would need to handle duplicate classes via jQuery.removeClass('...') beforehand? The catch is I'm stitching multiple tweens together using TimelineLite that are using -= or += for className so I need to figure out a way to remove the class (using jquery) right before I add the tween +=class back in. Does that make sense? Thoughts?

Found one more issue with this. If you use +=someClass on an element that already has .someClass, it creates a duplicate class instead of intelligently checking that the class already exists. So now you end up with <div class='someClass someClass'>...</div> Here's a quick example http://jsfiddle.net/943mD/

Best support on the planet. Fixed and THANK YOU.

Hi, I just updated GSAP to the latest version and am now noticing an error that's happening with class names. I have a div element with multiple class names. <div class='myclass one default'>...</div> If i run this: TweenLite.to( '.myclass', 3, { className: '-=default' } ); There are spaces being removed and result in the following which breaks not only the CSS rules but also any jQuery calls to this element (e.g. $('.myclass.one') ). <div class='myclassone'>...</div> Everything was working fine until I upgraded to the latest version. Any suggestions?

Hi Jack, Thanks for the quick response. Totally makes sense, so the issue must be how im sequencing my calls then. I have a lot of flipping elements out of the viewport (e.g. top: -999%) and then back in the viewport tweening opacity via classnames. I'll take a closer look at my timing sequence as I'm sure the issue must be there. Thanks again for the amazing work on this library and the stellar support. I just signed up for shockingly green btw. Thanks - Mike D

Hi guys, Thanks for an amazing product. I wanted to get some advice on the best way to handle what seems to be a recurring issue for me. I always try to OOP all my animations/tweens as much as possible. One issue i keep running into that I haven't gracefully figured out how to handle is when a tween is not completely finished and another tween on the same object fires. Normally in jQuery using animate(), I would just chain in .stop(false,true) to basically stop the tween right there, clear the animation queue and then start the newly fired tween using the element's current state as the starting properties of the new tween. Right now im sniffing around the invalidate() method as possibly being a solution for this but am not totally sure. Thanks in advance!