Jump to content

Diaco last won the day on December 20 2017

Diaco had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Diaco

  1. 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 .
  2. Diaco


    Hi Mustana pls check this out : http://codepen.io/MAW/pen/wMBGPP/
  3. Hi celli pls check this out : http://codepen.io/MAW/pen/wMvyYX
  4. Hi montego pls check this thread : http://greensock.com/forums/topic/13220-animating-along-a-path
  5. yep , you just need to set transformOrigin once with first tween or with a .set() method
  6. 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
  7. Hi OneManLaptop pls check this out : http://codepen.io/MAW/pen/dGbgwz
  8. 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(); });
  9. 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
  10. Hi flash08 pls check this out : http://codepen.io/MAW/pen/MKgrKr
  11. Diaco

    SVG with Edge Animate

    Hi expint2006 hmm.... for layout , i think Macaw can help you : http://macaw.co/
  12. 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'
  13. 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
  14. 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
  15. 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 .
  16. Hi jstafford pls check this thread about using MorphSVG Plugin + Bezier plugin : http://greensock.com/forums/topic/13220-animating-along-a-path/
  17. Diaco

    SVG with Edge Animate

    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
  18. 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
  19. 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
  20. 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});
  21. Hi edquijano i'm a bit confused , do you mean like this : http://codepen.io/MAW/pen/ojrqBJ
  22. pls try this : $(".box").click(function(event) { var H = $(".workLarge").outerHeight(); TweenLite.set(correctImage, {clearProps:"all"}) //... .from(".workLarge", 1, {height:H,immediateRender:false}) //... });
  23. Hi Devotee007 pls check this out : http://codepen.io/MAW/pen/ojrGoE
  24. 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/
  25. 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