Diaco

Hi PointC 
 
works correctly , pls try like this : 
 
Draggable.create("#dragControl", { type:"x", throwProps:true, bounds: dragStop, snap:arr, onThrowComplete: function() {   var final = arr.indexOf(this.x); console.log("Final position was: " + this.x +" and the final index was:" + final); } });

Hi blueblau 
 
if i understood correctly , you need to pause your Tween/Timeline , pls try like this :
 
var tl = new TimelineMax({paused:true}); tl.to(".start",1,{className:"finish"}); tl.progress(0.5); or
var tl = new TimelineMax(); tl.to(".start",1,{className:"finish"}); tl.progress(0.5).pause();

Hi Juc1 
 
if you want to tween svg child elements ( rect / circle ...etc ) , pls use ' x ' property instead of ' left ' , and i think you need to add overflow:visible to your css for svg :
svg{  overflow:visible }

Hi iamacatperson 
 
one way is simply use a variable :  See the Pen XXbWqX by MAW (@MAW) on CodePen

Hi friendlygiraffe 
 
pls try this : 
TweenMax.ticker.addEventListener('tick', Update); var start = new Date(); function Update(){   var now = new Date(); DisplayDiv.innerHTML = now-start; }; See the Pen yeyEVj by MAW (@MAW) on CodePen

Hi OneManLaptop 
 
pls check this out :  See the Pen dGbgwz by MAW (@MAW) on CodePen

Hi iamacatperson 
 
pls try shapeIndex:-1
 
btw , in this case you can have visually same tween with this :
TweenMax.to("#left",1,{scaleX:-1,transformOrigin:'100% 0%'}); // or transformOrigin:'right'

Hi dbj 
 
you can simply use .addPause() instead of  switch statement and tweenFromTo :
 
http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/pause/
 
you can see same usage here :  See the Pen yYradO by MAW (@MAW) on CodePen

Hi jstafford 
 
pls check this thread about using MorphSVG Plugin + Bezier plugin : http://greensock.com/forums/topic/13220-animating-along-a-path/

Hi coco 
 
pls try like this :
.fromTo(".img",1,{opacity:0,x:-30},{opacity:1,x:100});    // or .fromTo(".img",1,{autoAlpha:0,x:-30},{autoAlpha:1,x:100});    pls check CSSPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/
 
you don't need to use css:{} wrapper , but if want ; 'x' property should be in css wrapper

Draggable has zIndex property , so you can simply do this :
Draggable.create('.draggable'); document.getElementById('btn').addEventListener('click',function(){   TweenLite.set('#orange',{zIndex:Draggable.zIndex++}) }) pls check this out :  See the Pen 9669513a27014a424f2fed07978ba6c8 by MAW (@MAW) on CodePen

Hi edquijano 
 
i'm a bit confused , do you mean like this :  See the Pen ojrqBJ by MAW (@MAW) on CodePen

Hi Devotee007 
 
pls check this out :  See the Pen ojrGoE by MAW (@MAW) on CodePen

Hi ulittle 
 
pls try this :
 
function An_SVG(T,F){   var X=document.getElementById("Stage_"+T),   URL=X.style.backgroundImage.replace('url(','').replace(')','').replace(/['"]+/g,'');   var XR=new XMLHttpRequest();   XR.onreadystatechange=function(){     if (XR.readyState==4&&XR.status==200){       X.style.backgroundImage='';X.innerHTML=XR.responseText;var S=X.getElementsByTagName('svg')[0];       S.setAttribute('width',X.offsetWidth);S.setAttribute('height',X.offsetHeight);F();     }    };XR.open("GET",URL,true);XR.send(); }; /////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////// An_SVG("SVG",RUN); // pass your SVG id + your function for callback  An_SVG("anotherSVG",RUN2); // pass your SVG id + your function for callback  function RUN(){ TweenLite.to("#head",1,{x:200});  };  function RUN2(){   var tl=new TimelineLite();       tl.to("#svgtext",1,{x:200});       //........  }; pls put these code in your compositionReady , btw , i just test that in local systems not online server .
 
pls let me know if have any problem with that

Hi derp 
 
if i understood correctly , you can use onReverseComplete event callback , like this:
 
TweenMax.to(div,1,{x:200, onComplete:function(){console.log('playComplete')}, onReverseComplete:function(){console.log('reverseComplete')}, }); pls check the .eventCallback() Doc. : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/

ok , try this too :
 
var share = document.querySelectorAll(".share"); for(var i=share.length; i--{   var share[i].Anim = new TimelineLite();   tl.to(share[i].querySelector('.share-select'),1,{autoAlpha:1,x:10});   // add tweens to your timeline here...   tl.reversed(true);   share[i].Anim=tl;   shareBtnEv(i); }; function shareBtnEv(i){   var anim = share[i].Anim;   share[i].querySelector('.share-button').addEventListener('click',function(){     anim.reversed(!anim.reversed());   });   share[i].querySelector('.share-close').addEventListener('click',function(){     anim.reverse();   }); };

Hi looeee 
 
if i understood correctly , pls check this out :  See the Pen aOzeNR by MAW (@MAW) on CodePen

 
the concept is create a dummy div and make that Draggable , and use the tween target as Draggable trigger .
 
you can do any calculation in Update function

Hi jitu 
 
you can find the CDN links here : http://greensock.com/ ( home page ) > DOWNLOAD GSAP ( green button ) > Customize tab

Hi jellevrswk 
 
in addition to Jonathan's advice :
 
the problem come from your SVG ( your SVG already has transforms )
 
pls check Jack's answer and detailed explanation here : http://greensock.com/forums/topic/12732-svg-tweenmaxto-animation-distorts-initial-scale-and-transform-values/
 
btw , you can fix your svg issues with this online tool : https://jakearchibald.github.io/svgomg/
paste your svg in " Paste markup " field and don't forget to turn off the " Clean IDs " in options menu 
 
your demo with fixed svg : 
See the Pen gaZJzg by anon (@anon) on CodePen

Hi poolboy 
 
yep , works as expected and you can do something like this : 
TweenMax.to(div,1,{height:'90vh',width:'50vw', onComplete:function(){   this.target.style.height = this.vars.css.height ; this.target.style.width = this.vars.css.width ; } });

Hi GOLDPoint Systems 
 
as you can read in the Doc :
 
Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 1 which is identical to Quad but with a more intuitive name. The more power, the more exaggerated the easing effect. Using a numeric approach like this in the name makes experimenting easier.
  This is one of the eases that is natively accelerated in TweenLite and TweenMax. All of the "Power" eases and their counterparts (Linear (0), Quad (1), Cubic (2), Quart (3), Quint (4), and Strong (4)) are accelerated.   so pls try this : transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);

Hi nagman 
 
for now pls try like this : 
TweenLite.fromTo("p",1,{letterSpacing:0},{letterSpacing:10});

Hi coco 
 
you have 2 way to go :
 
1 - check the target scale with onUpdate function :  See the Pen zvyBgz by MAW (@MAW) on CodePen

 
2 - use .isActive() method and check the target scale before tween :  See the Pen GpPjKz by MAW (@MAW) on CodePen

 
i prefer the first one .

Hi sorciereus 
 
you just need to add a container and rotate that :  See the Pen EVOJQp by MAW (@MAW) on CodePen

Hi kaplan 
 
pls make a reduced Codepen Demo available  .
 
every thing works correctly as expected and tweens play in order of timeline timing
 
pls check this out :  See the Pen RWqqwj by MAW (@MAW) on CodePen

 
.add() method doc : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/