[Draggable start position]

Hi blue-infinity 

 

pls check this out : 

See the Pen Kzmxay by MAW (@MAW) on CodePen

[Rotating a spinning object around a central point]

Hi guys

 

in addition ; you can use a bezier Tween too : 

See the Pen VabQZK by MAW (@MAW) on CodePen

[Force a tween to complete by killing it]

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();
  }
}

[SVG apply transform attribute with Draggable]

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 : 

See the Pen RaVPEB by MAW (@MAW) on CodePen

 

 

 

 

 

[Offsetting the center point for an element moving along a bezier]

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 : 

See the Pen PNpLWM by MAW (@MAW) on CodePen

[onUpdate]

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 }
  }
});

[onUpdate]

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) } ) } 
});

[Get percentage with Draggable]

Hi Climber 

 

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

[Tween 18000px wide image on canvas]

Oh.... Cool.... ! 

There's always another secret !     ...

[Tween 18000px wide image on canvas]

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')
};

[invalid pause tween value: true]

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 : 

See the Pen yOVxeZ by MAW (@MAW) on CodePen

 

btw , you can defined paused tween in this way too :

TweenLite.to( obj , 1, { .... } ).paused( true );

[Transform chaining in GSAP]

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. 

[invalid pause tween value: true]

Hi hackfin 

 

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

[Tweening to original state before .set()]

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 =) .

 

See the Pen NNRJVB by MAW (@MAW) on CodePen

[Tweening to original state before .set()]

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 

[ScrambleText Plugin div width]

hmm , there's a tricky way to avoid that : 

See the Pen xVELWr by MAW (@MAW) on CodePen

[ScrambleText Plugin div width]

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"

[Letter Spacing inquiry]

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 .

[Your snippet for: mobile detection.]

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 !?

[Tween in my timeline doesn't reverse]

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 : 

See the Pen adLBQK by MAW (@MAW) on CodePen

 

pls fork above codepen demo with simple shape of your code , if still have any problem .

[tween drop-shadow?]

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/

[Flicker when tweening Sprite]

Hi kleeman 

 

your tween should be to    -(sprite width-(sprite width / frames))    with    ease : SteppedEase.config( frames-1 )

 

pls check this out : 

See the Pen mPEgVL by MAW (@MAW) on CodePen

[Latest Chrome update 49 causes animation jitters (scale)]

Hi guys

 

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

[Morphing help - cannot morph a <G> SVG element.]

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.

[Syncing a timeline with a video]

this's another simple demo ( Draggable demo ) i think can help : 

See the Pen JXXMaB by MAW (@MAW) on CodePen