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. Hi kaplan pls make a reduced Codepen Demo available . every thing works correctly as expected and tweens play in order of timeline timing pls check this out : http://codepen.io/MAW/pen/RWqqwj .add() method doc : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/
  2. Hi rhormazar for hover animations pls check this thread : http://greensock.com/forums/topic/11259-problems-in-hover-animations-in-elements/ and for that issue , unfortunately i can't test on Safari right now , but maybe you can solve that by set perspective for elements parent div .
  3. Hi Lasercode yep , as padders mentioned correctly , you need to load at least TweenLite + CssPlugin to animate DOM elements . you can tween any obj property with TweenLite , so it's absolutely possible to animating DOM css properties just with TweenLite but you should to define css prefixes for all browsers + consider browser bugs like Firefox(specially with svg) and stupid IE +... i don't think that's really worth to do !... do you really have problem with GSAP file size !? TweenLite (9kb) css (15kb) TimelineMax (6kb)
  4. Hi padders pls check this out : http://codepen.io/MAW/pen/ojQaZj you have some issues in your SVG , pls check and fix your svg issues before using with this online tool : https://jakearchibald.github.io/svgomg/
  5. heh , as Jack and Carl know ; i had some internet connection problems + some travel and official stuffs to do +... and just forgot about that , as you can see the pen created October 28
  6. Hi gazelle Unfortunately the SVG spec doesn't support 3D transforms , you can have same effect ( visually ) by this : TweenMax.from(".ny",1,{scaleY:0,skewX:-60,transformOrigin:"center bottom",opacity:0}); pls check this out : http://codepen.io/MAW/pen/wKQpgM
  7. Hi jvkirkwo in this case " this " returns : event Target pls try this : var D = Draggable.create('.box'); D[0].addEventListener('press', function(){ console.log( Draggable.get(this) ) });
  8. Hi vanadu at first Sorry for the late reply , Pls check this out : http://codepen.io/MAW/pen/OyZBVG/
  9. hmm if i understood correctly , you have 2 ways to go : 1 - AttrPlugin ( Tween complex string-based values ) : http://greensock.com/gsap-1-18-0 with 1.18.0 you can tween complex string-based values , but there's a point , you should to apply path/polygon with same point type / points count , otherwise you will have a jump in your tween . simple demo : http://codepen.io/GreenSock/pen/MaabXe 2- MorphSVGPlugin : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/
  10. Hi G BIN if i understood correctly about " dynamic css values ", you need invalidate() method : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/invalidate/ pls check these examples : Tween : http://codepen.io/MAW/pen/PPoyor Timeline : http://codepen.io/MAW/pen/bddvgy
  11. Hi Mat-Moo pls try like these ways : TweenMax.to(el2, 10, {attr:{width:800,height:800,x:100,y:100},rotation:360,transformOrigin:"center"}); // or TweenMax.to(el2,10,{transformOrigin:"center",rotation:360,scale:800/600}); and about scaling issue , maybe this can help you : vector-effect="non-scaling-stroke" http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
  12. Hi martis pls check this out : http://codepen.io/MAW/pen/LpXYxO/
  13. Yep , pls check the pen again : http://codepen.io/MAW/pen/YyJLXb
  14. Hi Blake ( blake@blakerutledge.com ) pls check this out : http://codepen.io/MAW/pen/LpgmRa i just download zip file , replace js files with local files and works correctly
  15. Hi aderaaij pls check this out : http://codepen.io/MAW/pen/YyJLXb
  16. Yep , you can use tl.stop() or tl.paused( true ) too : http://codepen.io/MAW/pen/WQaMez actually tl.stop() returns tl.paused( true ); pls check the doc : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/paused/
  17. Hi Liam@II your code should be something like this : EC.SVG.accessSVG(sym.$("Pasted")).done( function(svgDocument){ var myShape= $("#myShape",svgDocument)[0]; var anotherShape= $("#anotherShape",svgDocument)[0]; TweenMax.to(myShape,0.5,{morphSVG:anotherShape}}); } );
  18. Hi Visuals pls check this out : http://codepen.io/MAW/pen/WQaMez
  19. Hi Gary Griswold pls try like this : var D = Draggable.create(thumb,{ type : 'x' , bounds : slider }); console.log('minX : '+ D[0].minX +' , maxX :'+D[0].maxX) btw , pls check this pen for another way : http://codepen.io/MAW/pen/ZGLjVr
  20. Diaco

    Split Text Plugin

    Hi jstafford pls check " utils " folder
  21. Hi kathryn.crawford pls provide Codepen demo for your questions . check this out : http://codepen.io/MAW/pen/WQawdL
  22. ah ! , just a typo , pls check again : http://codepen.io/MAW/pen/qOMMxW
  23. Hi daversa pls check this out : http://codepen.io/MAW/pen/qOMMxW
  24. Diaco

    Glow effect?

    Hi azuki pls try like this : html : <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"> <defs> <filter id="glow" x="-150%" y="-150%" height="500%" width="500%"> <feGaussianBlur stdDeviation="15" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <circle filter="url(#glow)" cx="100" cy="100" r="40" fill="red" /> </svg> and js : TweenMax.to("#glow feGaussianBlur",1,{attr:{stdDeviation:0},repeat:-1,yoyo:true});
  25. Hi paul_ngc pls check this out : http://codepen.io/MAW/pen/GpXGMd