Diaco

hmm , i can't test on real ios / mac right now , but i've just tested with window safari (5.1.7) and test on mac (safari 6.2) and ios ( safari 7) via http://crossbrowsertesting.com and seems works correctly as expected .

Hi Mustana pls check this out : http://codepen.io/MAW/pen/wMBGPP/

Hi celli pls check this out : http://codepen.io/MAW/pen/wMvyYX

Hi montego pls check this thread : http://greensock.com/forums/topic/13220-animating-along-a-path

yep , you just need to set transformOrigin once with first tween or with a .set() method

Hi Technics1210 i don't know that what's your scenario , but pls use .fromTo() tweens instead of reset position with onComplete() . so , your code is this : var tl = new TimelineLite(); tl.fromTo("#stuhl09",0.2,{ x:beginX },{ x:endX,ease:Linear.easeNone,repeat:7 }) .fromTo("#stuhl09",2,{ x:beginX },{ x:endX,ease:Power3.easeOut }) .add(function(){ tl.restart() },'+=12'); http://codepen.io/MAW/pen/PZYLMo

Hi OneManLaptop pls check this out : http://codepen.io/MAW/pen/dGbgwz

for .fromTo() tweens do like this : var Tween = TweenMax.fromTo(".red",10,{x:0},{x:100}); var tl = new TimelineMax(); tl.add(Tween) .to(".blue", 2, {x:100}); $("#change").on("click", function() { Tween.vars.startAt.x = 200; // from value Tween.vars.css.x = 500; // to value tl.seek(0).invalidate().restart(); });

Hi Mr Pablo you need to use .invalidate() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/ pls check this out : http://codepen.io/MAW/pen/bddvgy

Hi flash08 pls check this out : http://codepen.io/MAW/pen/MKgrKr

Hi expint2006 hmm.... for layout , i think Macaw can help you : http://macaw.co/

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 MindGamer pls check Jack's detailed explanation + solution here : http://greensock.com/forums/topic/12732-svg-tweenmaxto-animation-distorts-initial-scale-and-transform-values/ you can fix your svg issues with this useful online tool too : https://jakearchibald.github.io/svgomg/ pls check this out : http://codepen.io/MAW/pen/EVqqmr

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 : http://codepen.io/MAW/pen/yYradO

Hi Yuri your code is to calculating x,y base of div position ( pls change Draggable type to 'x,y' ) , for rotated divs you can use trigonometry . edit : Blake is completely right .

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

Hi Zhur pls check this thread : http://greensock.com/forums/topic/13260-alternative-to-using-edgecommons-for-morphsvg-within-edgeanimate/ check / download the attached zip file - copy these file to 'js' folder : TweenMax.min.js & DrawSVGPlugin.min.js - don't test that locally , run your adobe Edge and File menu > Preview In Browser (Ctrl+Return) , or use a local test server like Xampp ; some browsers like the Google Chrome will not load local file by default ( due to security reason ) GSAP+Edge Animate.zip

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 : http://codepen.io/MAW/pen/9669513a27014a424f2fed07978ba6c8

Hi paul_ngc you can set draggable zIndexBoost:false and use something like this to set items zIndex : TweenLite.set([item1,item2,item3],{zIndex:999});

Hi edquijano i'm a bit confused , do you mean like this : http://codepen.io/MAW/pen/ojrqBJ

pls try this : $(".box").click(function(event) { var H = $(".workLarge").outerHeight(); TweenLite.set(correctImage, {clearProps:"all"}) //... .from(".workLarge", 1, {height:H,immediateRender:false}) //... });

Hi Devotee007 pls check this out : http://codepen.io/MAW/pen/ojrGoE

to make SVG graphics accessible in adobe Edge animate pls check this method too ( with out EdgeCommons / jquery ) : http://greensock.com/forums/topic/13260-alternative-to-using-edgecommons-for-morphsvg-within-edgeanimate/

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