Jump to content
GreenSock

Diaco last won the day on December 20 2017

Diaco had the most liked content!

Diaco

Moderators
  • Posts

    1,215
  • Joined

  • Last visited

  • Days Won

    86

Everything posted by Diaco

  1. Hi mgrubiak pls fix by this : var tran = cardE[0]._gsTransform; http://codepen.io/MAW/pen/YyOwWy
  2. how about this : var obj2={C:16777215}; obj2.C='#'+obj2.C.toString(16); TweenMax.to(obj2,3,{colorProps:{C:"#1ef04a",format:"number"},onUpdate:function(){ console.log(obj2); TweenMax.set('.box',{backgroundColor:obj2.C}) }}); http://codepen.io/MAW/pen/b8bc4658ea21038e6242894033226369
  3. Hi Buddy seems works correctly as expected : http://codepen.io/MAW/pen/b8bc4658ea21038e6242894033226369
  4. Hi reccanti Firefox has some known issues with SVG masking/clipping which has nothing to do with GSAP pls check this thread : http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/ btw you can use Attrplugin or MorpgSVGplugin
  5. good call ! , now just return empty obj {} if can't find any transform via GSAP http://codepen.io/MAW/pen/bVjZGN/
  6. Hi DRock pls try like this : var tl = new TimeLineMax() .to(.......) .to(.......) .set(seven,{attr:{src:"images/7777777.png"}}) //or //.add( function(){ seven.src="images/7777777.png"; })
  7. Hi guys how about this : var box = document.querySelector('#box'); TweenLite.set( box,{x:10,y:200,rotation:50} ); function ElemGT(X,P){ var XgT={}; if(X._gsTransform){ for(var i=P.length;i--{XgT[P[i]]=X._gsTransform[P[i]];} } return XgT; }; console.log( ElemGT( box , ['x','y','rotation','opacity'] ) ); // Object { x: 10, y: 200, rotation: 50, opacity: undefined } http://codepen.io/MAW/pen/bVjZGN/
  8. pls fix these issues : 1- pls check the js code , comments and your svg file ( you should to set class name for your svg paths ) : EC.SVG.accessSVG(sym.$("Pasted")).done( // Pasted = your image id function(svgDocument){ var yourSVG = $(".myClassName",svgDocument) ; // "myClassName" your svg Path class name TweenMax.from(yourSVG,10,{drawSVG:0}); } ); check svg path Class name and js code in this demo : http://codepen.io/GreenSock/pen/jEEoyw 2 - pls set stroke and stroke-width property for your path in your svg file , or set via GSAP like this : EC.SVG.accessSVG(sym.$("Pasted")).done( function(svgDocument){ var yourSVG = $(".myClassName",svgDocument) ; TweenMax.set(yourSVG,{ stroke:'red' , strokeWidth:5 }); // set stroke and stroke-width TweenMax.from(yourSVG,10,{drawSVG:0}); } ); 3 - you just need to load these js files : TweenMax.js + DrawSVGPlugin.js + jquery + EdgeCommons.js ( you need jquery and EdgeCommons just for make svg accessible for js selector ) 4- the opacity property can take a value from 0-1 ( you set to 5 in your tween ) and finally ; pls don't share zip files with club bonus plugins
  9. Hi lucto_et_emergo Unfortunately i can't understand what you mean by '' time-lag " if you mean a bit delay before animation ; it come from edge animate + EdgeCommons.js , actually that library get your svg image source and replace image tag with a div+inline svg to make that accessible for js selector . you can find another faster ways to load svg here : http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/
  10. pls load the MorpSVGPlugin too : //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
  11. Hi jceddy you can do something like this : var X=0; // your logic Draggable.create('.mas',{ onPress:function(){ if(!X){ this.endDrag() } } }); you can use disable() / enable() too , pls check the Draggable Doc. : http://greensock.com/docs/#/HTML5/Drag/Draggable/
  12. Hi jonathan.a.katz pls try like this : var myDiv = document.querySelector('#myDiv'),OP=0; TweenMax.to(myDiv,1,{x:500,onUpdate:function(){ P = Math.round(myDiv._gsTransform.x/100); // change 100 to your desired ratio if(OP!=P){ console.log('fire!'); // do whatever you want here OP=P; } }});
  13. Hi kathryn.crawford pls check this out : http://codepen.io/MAW/pen/yYqMpZ
  14. Hi jstafford if i understood correctly , pls try like this : $( "ul.nav > li > a").hover( function(){ TweenMax.to($(this),0.3,{className:"+=myClassName"}); }, function(){ TweenMax.to($(this),0.3,{className:"-=myClassName"}); } ); // or $("ul.nav > li > a").each(function(){ this.anim = TweenMax.to($(this), 0.3, {className:"+=myClassName" , paused:true}); }); $("ul.nav > li > a").hover(over, out); function over(){ this.anim.play() }; function out(){ this.anim.reverse() };
  15. Hi Fahim that's better to generate tween or timeline out of the hover functions and just play/reverse ( or whatever ) with hover . pls check this thread : http://greensock.com/forums/topic/12737-opacity-on-hover/ something like this : $(".items").each(function(index, element){ var tl = new TimelineLite({paused:true}); // add your timeline tweens here //..... //.... element.animation = tl; }); $(".items").hover(over, out); function over(){ this.animation.play() }; function out(){ this.animation.reverse() };
  16. Hi mikesol pls try like this : var BB = document.getElementById('svgElem').getBBox(); TweenMax.fromTo('#svgElem',10,{x:BB.x*-1,y:BB.y*-1},{x:'+=100',y:'+=100'}); http://codepen.io/MAW/pen/GpJjaB
  17. Hi popClingwrap pls check this out : http://codepen.io/MAW/pen/PPaRWZ
  18. Hi folktrash you can use .duration() too , adjusts the timeline's timeScale to fit it within the specified duration. pls check this out : http://codepen.io/MAW/pen/rOKpBb/
  19. Hi TDT Yep , i see what you mean , but there's a point : with css ( even inline style ) , order of properties is really important and you have different result with different orders . in the other hand GSAP arranges properties before apply inline style and you see exactly same result with different orders . pls check this out : http://codepen.io/MAW/pen/vNreyz in the above pen , the green box styled with GSAP , red with css and blue with jquery.
  20. Hi Manfrex you can use .getChildren() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getChildren/ Returns an array containing all the tweens and/or timelines nested in this timeline. and .getLabelsArray() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelsArray/ Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline. pls check the Timeline Doc. for more detail and other methods : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/
  21. Hi saia Yep , I'd echo Tahir's request , pls make a CodePen Demo available for your questions : How to Create a CodePen Demo
  22. Hi lucto_et_emergo this's a simple Demo with ( EdgeAnimate 2014.1 + GSAP ) you need to add TweenMax.min.js + DrawSVGPlugin.min.js to "js" folder . and pls 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 .
  23. Diaco

    Opacity on Hover

    Hi PropKitty pls make a Codepen Demo available for your questions : How to Create a CodePen Demo pls try like this pen : http://codepen.io/MAW/pen/pjKjEd and check this topic too : http://greensock.com/forums/topic/11259-problems-in-hover-animations-in-elements/
  24. Hi TopGUN121 pls try like this : var Targets = document.querySelectorAll('.Targets'); Draggable.create('.Draggable',{ onDragEnd:function(){ for(var i=Targets.length; i--{ if(this.hitTest(Targets[i],'50%')){ console.log(Targets[i].id) } } } });
×