[Need to force Tween to complete]

Hi mthomson 

 

pls tween same property with hover over / out functions , currently you tween progress on over and time on out

[Possible to animate gradientTransform in SVG's?]

Hi Matt Hoover 

 

pls check this out : 

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

[X,Y and rotation drag on one element via two triggers]

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

[X,Y and rotation drag on one element via two triggers]

Hi Valelacerte 

 

you need to add " touchstart " listener too : 

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

[How to offset MorphSVG and BezierPlugin on SVG content]

Hi ElliotGeno 

 

pls check this topic : http://greensock.com/forums/topic/14003-offsetting-the-center-point-for-an-element-moving-along-a-bezier/

[strange behaviour TweenMax with transform svg]

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

[GSAP timeScale]

in addition to Carl and Rodrigo , if i understand correctly , you can simply use SlowMo ease type too :

tl
  .to('#el', 3, {x:200, ease:Linear.easeNone})
  .to('#el', 3, {x:0, ease:Linear.easeNone})
  .to('#el', 3, {y:200, ease:Linear.easeNone})
  .to('#el', 3, {y:0, ease:Linear.easeNone})


  .from(tl,tl.duration(),{timeScale:5,ease:SlowMo.ease.config(.6,.7, true)},0)
  //.from(tl,tl.duration()-2,{timeScale:5,ease:SlowMo.ease.config(.6,.7, true)},1)

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

[Combining the Attr and Bezier plugins for SVG clip path animations]

Hi zachschnackel 

 

you can simply use onUpdate callback with a tween of simple object , like this :

 

var XY = {x:0,y:0};

TweenLite.to(XY,1,{bezier:{values:[...]},onUpdate:function(){
  console.log(XY.x)
  yourElem.setAttribute( "attribute" , XY.x );
}})

[Jerky scaling of image]

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 

[Firefox background image jumps after scale]

Hi hanslibuzli 

 

pls add tiny amount of rotation to your tween , like this :

TweenLite.set(".band", {  scale : 1 , rotation:0.01 });

[TweenMax bezier animation issue]

Hi janily 

 

in addition to Blake's advise , i think this Demo can help you too : 

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

[How to pass element to onComplete function?]

Hi dwillis 

 

pls try : this.target

[SPRITE ANIMATION - Failed Attempt]

Hi SoL2Squiz 

 

var animate = TweenMax.to('.MySprite2', 1, {
  repeat: -1, // >> loops the sprite ( -1 = infinity loop )
  x: -2250, //  >> -( width - width/frame )
  ease: SteppedEase.config(15) // >> total frame - 1
});

 

pls load TweenMax too 

[Draggable and saving the position]

Hi ochalmers 

 

pls check this out : 

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

[Draggable : Object wider than bounds]

Hi swann 

 

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

[How to get the calculated styles data of TimelineLite().progress?]

as blake suggested before , you can use _gsTransform object for most of css transform properties ,

 

and for other properties like left ,width , ...etc you can use one of these methods :

 

1- elem.style['propery name'] , like this : elem.style['width']

 

2 - CSSPlugin.getStyle() ,  like this : CSSPlugin.getStyle( elem , "width" );

 

3 - getComputedStyle(elem) , like this : var style = getComputedStyle(elem); console.log( style['width'] )

 

don't forget every TweenLite instance handles tweening of js objects as raw data ( whithout css prefixes , unit of measurement ) and getting/setting of css properties is CssPlugin's duty . actually you can get raw values from GSAP engine , but it's too deep and needs some really unnecessary functions when you can simply get data with above methods .

[How to get the calculated styles data of TimelineLite().progress?]

Hi Sophia 

 

i think this topic can help you : http://greensock.com/forums/topic/12534-pick-value-between-2-css-values-using-gsap/

[Center rotation svg group]

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

[FromTo: I thought I'd have a small path segement but...]

Hi 2474 

 

pls check this out : 

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

[Smooth easeOut killAll()]

in addition to Carl's Great advise ; you need to kill or pause tween/timeline too , after set to timeScale(0) , like this :

TweenLite.to( Tween, 1, { timeScale:0 , onComplete : function(){ Tween.kill() } });

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

[Rotating a spinning object around a central point]

i think this can help you too ,

 

it's svg , but you can use that for div/img tag too ; now you can simply set the number of objects to orbit : 

 

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

[Rotating a spinning object around a central point]

yep , pls check this out : 

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

[Fading and Blending Radial Gradient ?]

yep , today Jonathan 's solution is really handy and cool with stagger/cycle method ( v1.18.2 )

[Draggable start position]

yep and another simplest solution ( without js ) is simply change your img css to this :

img {
  max-width: 100%;
  height: auto;
  top:50%;
  transform:translate(0%,-50%);
  position:absolute;
}

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

[Fading and Blending Radial Gradient ?]

Hi Lynx 

 

pls check this topic : http://greensock.com/forums/topic/11828-back-with-gradient-changing-offset-value/