Diaco

Hi Gardi 
 
if i understood correctly , you can use timeScale() , but i think that's better to use something like this :
 
var fps = 30 , framesCount = 16 , dur = (1/fps)*(framesCount-1) ; TweenMax.to('.character',dur,{repeat:-1,backgroundPosition: "-2400px",ease:SteppedEase.config(framesCount)}); See the Pen RaNEjG by MAW (@MAW) on CodePen

Hi etnos 
 
i think this demo can help you :  See the Pen rxqqQG by MAW (@MAW) on CodePen

Hi daniel_pan 
 
pls add immediateRender : false to your Tween Vars :  See the Pen XXqMWg by MAW (@MAW) on CodePen

yep , but if you need to use negative position parameter for your second tween , you can set overwrite propery :
tl.from(".arrow_top", 3, {x: "-=300", autoAlpha:0, ease:Power3.easeOut})     .to(".arrow_top", 1.5, { scale:1, x:"-=500", rotation:"-=34",y:"+=33", ease:Power4.easeIn, overwrite:0 },'-=0.5') pls check the overwrite in the Doc : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

Hi cowfields   
 
at first there isn't .addDelay() method in GSAP api , 
 
but if i understood correctly , you can use this function :
var tl = new TimelineMax() .staggerTo('.dots',1,{y:100},1); var Tweens = tl.getChildren()[0].getChildren(); function StaggerGaps(STweens,amount){ // " STweens" are your staggers tweens and "amount" is the gap duration between tweens for(var i=0; i<STweens.length; i++){ STweens[i].startTime(amount*i) } }; StaggerGaps( Tweens , 0.2 ); // set 0.2 second gap  pls check this out :  See the Pen 20c87274b18280c3a6c58dc29b299ef7 by MAW (@MAW) on CodePen

Hi retropunk 
 
if i understand correctly pls check these demos :
 
See the Pen KdMgvq by MAW (@MAW) on CodePen


See the Pen QbgLmV by MAW (@MAW) on CodePen
 
and you can use MorphSVGPlugin.pathDataToBezier() + BezierPlugin to animating along a path 

Hi friendlygiraffe 
 
you can simply use Elastic ease type :  See the Pen KVZwZx by MAW (@MAW) on CodePen

Hi Vahid-Designer 
 
pls provide a reduced Codepen Demo for your questions : How to Create a CodePen Demo
 
and i can't see any problem with ease type :  See the Pen Nxwxoe by MAW (@MAW) on CodePen

 
pls fork above Codepen with your markup / script if still have any problem 

Hi Vahid-Designer 
 
Nope , you can't use Gsap Tweens and CSS animations/transitions together for same element .   and about ' Javascript tweens vs css3 animations ' , pls check these posts :   https://css-tricks.com/myth-busting-css-animations-vs-javascript/   http://greensock.com/transitions/   http://greensock.com/css-performance   http://greensock.com/css-workflow/

Hi dominate 
 
it's better to use Timeline , you can add tweens to tl and the new tweens will add at the end of timeline , however if you want to just load TweenLite , there's " onComplete " callback for tweens : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/
 
you can define onComplete callback with these ways :
var myAnimation = TweenLite.to(obj,1,{...}); myAnimation.eventCallback("onComplete", myFunction); or
TweenLite.to(obj,1,{... , onComplete : myFunction });

hmm , I think this's better than .stagger method :  See the Pen adLBQK by MAW (@MAW) on CodePen

var imgIndex={i:1}, I=0 , img=document.getElementById('myImg'); var imgSrc = 'http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/images/seq/guilty_dolls_'; TweenMax.to(imgIndex,3,{i:97,roundProps:'i',repeat:-1,repeatDelay:1,ease:Linear.easeNone,onUpdate:function(){ if(I!==imgIndex.i){ var num = I<9?'0'+imgIndex.i:imgIndex.i; /* you can avoid above line by rename your image from ( ...01.jpg ) to ( ...1.jpg ) and remove "0" in less than 10 numbers , then use this line to setAttribute : img.setAttribute("src", imgSrc+I+'.jpg'); */ img.setAttribute("src", imgSrc+num+'.jpg'); I=imgIndex.i; }; }});

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

Hi zachschnackel 
 
 
if i understood correctly , nope GSAP just make ._gsTransform object ; as you can read in CssPlugin Doc :
 
All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like  element._gsTransform.scaleX

Hi spacewindow 
 
you can simply call your functions where you want in timelines :
mainTl   .to( obj , 1 , {} )   .to( obj , 1 , {} , 'label' )   .add( function(){ anotherTl.play() } , 'label' ) // start/run functions and tweens with same label at the same time   .to( obj , 1 , {} )   .to( obj , 1 , {} , 'label2' )   .add( function(){ anotherTl.pause() } , 'label2' )

Hi urtopal 
 
pls use .fromTo() tween instead of .set() + .to() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/fromTo/
.fromTo(".red", 2,{x:200},{x:500}) and use .set() method instead of .to() with duration of '0' to setting value : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/
var myTimeline = new TimelineMax();  myTimeline   .set(".red",{x:200})   .to(".red", 2,{x:500})   .pause(0); pls check this out :  See the Pen GoEdNB by MAW (@MAW) on CodePen

Hi daniel_pan 
 
pls try these ways :
 
See the Pen jWmKQz by MAW (@MAW) on CodePen

  tl.staggerTo(items, 0.15, {y:-10,opacity:1}, 0.1)     .addPause(null,function(){ if(toggle)tl.play(); } )     .staggerTo(items, 0.15, {y:0,opacity:0.2}, 0.1) function over(){  tl.restart(); toggle=0; } function out(){  tl.play(); toggle=1; } or 
 
See the Pen PZmaxp by MAW (@MAW) on CodePen

function over(){  TweenMax.staggerTo(items, 0.2, {y:-10,opacity:1}, 0.1) }; function out(){  TweenMax.staggerTo(items, 0.2, {y:0,opacity:0.2}, 0.1) }; with second way , if you need to use timelines ; you should to define 2 timelines , or clean your timeline before adding new tweens :
See the Pen GomGwN by MAW (@MAW) on CodePen

Hi spacewindow 
 
actually you can't do that in this way ,Timeline control its childs playhead , so you can't seek,pause,play or restart timeline child separately .

Hi venn 
 
pls check this blog post : Understanding the Position Parameter

Hi pnda007 
 
if i understood correclty your problem , pls use svgOrigin instead of transformOrigin , like this :
TweenMax.staggerTo('g',5,{cycle:{rotation:[360,-360]},svgOrigin:"90.1 151.9",ease:Linear.easeNone,repeat:-1}); pls check this out :  See the Pen vLKgKq by MAW (@MAW) on CodePen

 
and pls check this blog post about Animating SVG with GSAP : http://greensock.com/svg-tips

Hi Pieter 
 
pls try like this :
.to(document.getElementById("somediv"), 1, { rotation: 180, onComplete: incremental }) // pls remove " () " btw , timeline has own event callback too ; so you can do something like this too :
var tl = new TimelineMax({ repeat:5 , onRepeat: incremental }); and you don't need .play() , since your timeline isn't paused

hmm , for relative motions your code is OK , but there's a point ; pls generate unique string as label in each loop ( already you're using same string "step" as label in each loop ) or use relative position parameter instead of Labels like this :
function walkcycle(timeline, element, repeats) {     for (var i = 0; i < repeats; i++) {         timeline             .to(element, 0.2, { bottom: -4, ease: Power2.easeIn })             .to(element, 0.35, { bottom: 0, ease: Power1.easeInOut })             .to(element, 0.55, { left: "+=55" , ease: Power0.easeNone },'-=0.55');     } };

Hi armen 
 
the simple and short answer is ; Nope , you can't and for another target , you need to create new Tween .

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

Hi themepunch 
 
pls try like this :
TweenLite.fromTo("#redBox",1,{opacity:0,left:0},{opacity:1,left:100,onUpdate:getValue}); function getValue() {   var target = this.target[0];   var tLeft = target.style["left"];   var tOpacity = target.style["opacity"]; }; pls check this out :  See the Pen KVzMQo by MAW (@MAW) on CodePen

Hi d11202 
 
pls check Draggable .tween property : http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/tween/
 
you can do something like this :
var D = Draggable.create(target,{    throwProps:true }); // and then you can kill draggable throw tween with this :  D[0].tween.kill();