Diaco

Hi phidur 
 
if I understand correctly what are you trying to achieve, you can simply use draggable trigger property;
 
pls check this out:  See the Pen GNParR by MAW (@MAW) on CodePen

Hi Guys
 
pls try this : 
CSSPlugin.cascadeTo(".parent", 1, {className:"+=on", delay:2}); See the Pen KNrBVb?editors=0110 by MAW (@MAW) on CodePen

Hi  iuscare 
 
you just need to set transformOrigin like this : 
TweenMax.staggerFrom(listItems, .4, {scale:0,transformOrigin:'center'}, 0.3);

Hi qarlo 
 
pls try these methods :  See the Pen vydbbB by MAW (@MAW) on CodePen

  masterTl.seek( childTl.getLabelTime('labe') ); // if childTl added and start from time '0' in master timeline   masterTl.seek( childTl.startTime()+childTl.getLabelTime('labe') ); // if childTl position in another time in master Tl

method #2 is what you're looking for , you just need to add a .set() at the beginning . pls check the pen again

Hi Matt Hoover 
 
pls check this out :  See the Pen MwbRoL by MAW (@MAW) on CodePen

it's native javascript event : https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

Hi chriswyl 
 
it's about transform matrix multiplication , in your third example , pls check the result with remove x,y attributes from text and set transform to this :
transform=" translate(100,100) rotate(40 100,100) " but if you want to have that result you liked , pls try this :
TweenMax.set($("#t2"), { attr:{ x:x , y:y } , rotation:rot , svgOrigin:x+' '+y });

Hi johnnyno 
 
Pls use x,y properties instead of top/left , pixel snapping is cause of that jerky motion , with x,y you will use subpixels 

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

Hi swann 
 
pls check this out : https://jsfiddle.net/fx6rf688/

you can simply use circle cx/cy as svgOrigin reference , so your group center is : svgOrigin: ' 389.74  420.437 '

Hi blue-infinity 
 
pls check this out :  See the Pen Kzmxay by MAW (@MAW) on CodePen

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 :  See the Pen RaVPEB by MAW (@MAW) on CodePen

 
 
 
 
 

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

hmm , there's a tricky way to avoid that :  See the Pen xVELWr by MAW (@MAW) on CodePen

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

Hi friendlygiraffe 
 
you can use TweenLite.ticker to sync tween progress with video currentTime on every tick .
 
something like this :
var vid = document.getElementById("myVideo"); var tween = TweenMax.to( obj , 2 , { ... , ease:Linear.easeNone , paused:true }); function Update(){   tween.progress( vid.currentTime/vid.duration ) }; vid.onplay = function() {     TweenLite.ticker.addEventListener('tick',Update); }; vid.onpause = function() {     TweenLite.ticker.removeEventListener('tick',Update); };  
pls check this out :  See the Pen JXXOQy by MAW (@MAW) on CodePen

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

 
you can simply use these methods : 
 
.duration() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/duration/
 
.timeScale() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/timeScale/
 
.repeatDelay() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/repeatDelay/

Hi WW 
 
pls check this out ( css & perspective ) :  See the Pen jqWJyR by MAW (@MAW) on CodePen

Hi dax006 
 
if i understand correctly , you can use this little function :
function RemoveTweensBefore( timeline , myObject , time ){     var Tweens = timeline.getTweensOf( myObject );         for (var i = 0 , Tween ; i < Tweens.length; i++) {           Tween = Tweens[i] ;           if( Tween.startTime() < time && Tween.endTime() < time ){           timeline.remove( Tween );         }     }; }; // and then document.getElementById('remove').addEventListener('click',function(){     //tl.pause(0);     RemoveTweensBefore( tl , Red , 1 )     tl.restart(); }); pls check this out :  See the Pen xVwWmY by MAW (@MAW) on CodePen

Hi ald603 
 
you can use something like this :  See the Pen MyaWzm by MAW (@MAW) on CodePen

document.addEventListener("mousewheel",Go); document.addEventListener("DOMMouseScroll",Go); function Go(e){    var Tl = tl1 , SD = e.wheelDelta || -e.detail ; if( SD>0 && Tl.getLabelBefore()!=null ){ Tl.tweenTo( Tl.getLabelBefore() ) }else if( SD<0 && Tl.getLabelAfter()!=null ){ Tl.tweenTo( Tl.getLabelAfter() ) }; }; pls check the TimelineMax Doc. :
.getLabelAfter() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/
.getLabelBefore() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelBefore/
 

Hi jimeast 
 
i think in your case , draggable trigger property is the best and simplest solution ,
 
pls check this out :  See the Pen grpWKj by MAW (@MAW) on CodePen

Hi erikb 
 
if i understood correctly , pls check this thread : http://greensock.com/forums/topic/12534-pick-value-between-2-css-values-using-gsap