Diaco

Hi blue-infinity pls check this out : http://codepen.io/MAW/pen/Kzmxay

Hi guys in addition ; you can use a bezier Tween too : https://codepen.io/MAW/pen/VabQZK

Hi blue-infinity you can get all the tweens of a particular target with getTweensOf() and then use something like this simple loop or whatever you want : TweenMax.to('.box', 0.5, {x: 100, yoyo: true, repeat: -1}); TweenMax.to('.box', 0.5, {rotation: 360,backgroundColor:'red', yoyo: true, repeat: -1}); document.getElementById("btn").onclick = function() { var Tweens = TweenMax.getTweensOf('.box'); for(var i=Tweens.length; i--{ Tweens[i].repeat(0).progress(1).kill(); } }

Hi chriswyl pls use svgOrgin instead of transformOrigin , like this : TweenMax.set("#mytext", {rotation:30,svgOrigin:"200 100"}) Draggable.create("#mytext", {type:"x,y"}); and if you have bunch of rotated elements , something like this little function can help you : function svgInlineRotated(svgElem){ var t = svgElem.getAttribute("transform") , v = t.split('(')[1].split(')')[0].split(' ') TweenMax.set(svgElem, {rotation:v[0],svgOrigin:v[1]+' '+v[2]}) }; svgInlineRotated(document.getElementById("mytext")) //TweenMax.set("#mytext", {rotation:30,svgOrigin:"200 100"}) Draggable.create("#mytext", {type:"x,y"}); pls check this out : http://codepen.io/MAW/pen/RaVPEB

Hi Guys if you are using MorphSVGPlugin , actually you don't need to nest in another element , you can use simply .pathDataToBezier() Vars offsetX/offsetY ; pls check the Doc : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/pathDataToBezier/ and pls check this demo too : http://codepen.io/MAW/pen/PNpLWM

yep it's one of the GSAP engine options . and onComplete will remove listener but if you kill before tween complete , you should to remove that with this : ticker.removeEventListener("tick", render); and another way is this ( without addListener ) : var tick = 0; TweenMax.to('.ball', 30 ,{x:200 , onStart : function(){ tick = 0 }, onUpdate : function(){ tick++ ; if ( tick%60 == 0 ){ // your function call or whatever } } });

Hi mimeartist you can try something like this : var ticker = new com.greensock.Ticker(1); // tick once per second ticker.addEventListener("tick", render); function render(){ console.log('hi') }; // render is your function to call and can be whatever you want TweenMax.to('.ball', 30 ,{x:200 , onStart:function(){ ticker.addEventListener("tick", render); }, onComplete:function(){ TweenLite.delayedCall(0.01,function(){ ticker.removeEventListener("tick", render) } ) } });

Hi Climber pls check this thread : http://greensock.com/forums/topic/11096-draggable-percentage/

Oh.... Cool.... ! There's always another secret ! ...

To call function at 30fps you can use something like this : function caller(fps,fn){ var x = 0; this.call = function(){ x++; if(x % fps == 1 ){ fn() }; } }; var nCaller = new caller( 30 , render ); // call function 30fps ( max to 60 ) TweenLite.ticker.addEventListener('tick',nCaller.call); // call function 60fps function render(){ console.log('render') };

You read that correctly... but check what you got : " invalid pause tween value: true " that's why i said use paused instead of pause . pls check this out : http://codepen.io/MAW/pen/yOVxeZ btw , you can defined paused tween in this way too : TweenLite.to( obj , 1, { .... } ).paused( true );

Hi Ninili if i understand correctly , the short answer is nope , the order in which you declare the transform properties makes no difference. as you can read in CssPlugin Doc : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ In regular CSS, the order that you list the transforms matters but GSAP always applies them in the same order for consistency: translation (x, y, z), then scale, then rotationX, then rotationY, then skew, thenrotation (same as rotationZ) although in terms of constructing the matrix, the math is technically done in the reverse of that order.

Hi hackfin you just have typo issue , pls fix by use paused instead of pause

Great solution Carl ! , actually i thought about something like your solution , but faced to a little issue ; if you have a tween( tweening same property ) between set and revert steps . otherwise your solution is certainly better than mine =) . http://codepen.io/MAW/pen/NNRJVB

Hi xtn nope , for now there isn't any built-in solution , but i think in your case , the simplest way is one of these : /// method 1 : var elem = document.getElementById('blueBox'); // set() step : var oldBackground = window.getComputedStyle(elem,null)["background-color"] || '' ; TweenLite.set(elem,{backgroundColor:'#fff'}); // revert step : TweenLite.to(elem,1,{backgroundColor:oldBackground}); ///////////////////////////////////////////////////////////////////// /// method 2 : var elem = document.getElementById('redBox'); // set() step : TweenLite.set(elem,{backgroundColor:'#fff'}); // revert step : TweenLite.set(elem,{clearProps:'backgroundColor'}); TweenLite.from(elem,1,{backgroundColor:'#fff'}); i don't know what's your scenario/code , but you can use this too : TweenLite.from( elem , 1 , { backgroundColor:'#fff' , paused:true }); and then play that when you want

hmm , there's a tricky way to avoid that : http://codepen.io/MAW/pen/xVELWr

Hi NashEquilibro pls make a simple Codepen Demo for your questions / cases : How to Create a CodePen Demo and pls try this in your tween : chars:"01 " instead of chars:"01"

Hi sorciereus pls add this to your css : transform: translate(-50%,0%); and yep , for the separate delays and smoothest tween ( use x/y & subpixels instead of letterSpacing and pixels ) that's better to use GSAP SplitText plugin .

Hi guys If i understood correctly you need to detect devices width/height , Touch support , maybe sensors , vibrator or ... etc , right !? ... So simply you just need to check those specs for your needs . otherwise what's the difference between desktop and mobile !?

Hi lateek35 at first you don't need to use Math.ceil() , you just need to add roundProps : ' property ' to your tweens ; pls check RoundPropsPlugin Doc : http://greensock.com/docs#/HTML5/Plugins/RoundPropsPlugin/ and pls check this out : http://codepen.io/MAW/pen/adLBQK pls fork above codepen demo with simple shape of your code , if still have any problem .

Hi guys i think it's really good thing that browsers render drop-shadow in this way , it can really impact browsers performance . maybe that's better to try something like this tricky way : http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Hi kleeman your tween should be to -(sprite width-(sprite width / frames)) with ease : SteppedEase.config( frames-1 ) pls check this out : http://codepen.io/MAW/pen/mPEgVL

Hi guys yep , i see that on Win 10 too : Chrome Version 49.0.2623.87 m (64-bit)

Hi Acmafali with MorphSVGPlugin you can Morph these SVG tag : <path> <polyline> <polygon> , not group of svg elements ( < g > tag ) There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM.

this's another simple demo ( Draggable demo ) i think can help : http://codepen.io/MAW/pen/JXXMaB/