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 blue-infinity pls check this out : http://codepen.io/MAW/pen/Kzmxay
  2. Hi guys in addition ; you can use a bezier Tween too : https://codepen.io/MAW/pen/VabQZK
  3. Hi blue-infinity you can get all the tweens of a particular target with getTweensOf() and then use something like this simple loop or whatever you want : TweenMax.to('.box', 0.5, {x: 100, yoyo: true, repeat: -1}); TweenMax.to('.box', 0.5, {rotation: 360,backgroundColor:'red', yoyo: true, repeat: -1}); document.getElementById("btn").onclick = function() { var Tweens = TweenMax.getTweensOf('.box'); for(var i=Tweens.length; i--{ Tweens[i].repeat(0).progress(1).kill(); } }
  4. Hi chriswyl pls use svgOrgin instead of transformOrigin , like this : TweenMax.set("#mytext", {rotation:30,svgOrigin:"200 100"}) Draggable.create("#mytext", {type:"x,y"}); and if you have bunch of rotated elements , something like this little function can help you : function svgInlineRotated(svgElem){ var t = svgElem.getAttribute("transform") , v = t.split('(')[1].split(')')[0].split(' ') TweenMax.set(svgElem, {rotation:v[0],svgOrigin:v[1]+' '+v[2]}) }; svgInlineRotated(document.getElementById("mytext")) //TweenMax.set("#mytext", {rotation:30,svgOrigin:"200 100"}) Draggable.create("#mytext", {type:"x,y"}); pls check this out : http://codepen.io/MAW/pen/RaVPEB
  5. Hi Guys if you are using MorphSVGPlugin , actually you don't need to nest in another element , you can use simply .pathDataToBezier() Vars offsetX/offsetY ; pls check the Doc : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/pathDataToBezier/ and pls check this demo too : http://codepen.io/MAW/pen/PNpLWM
  6. Diaco

    onUpdate

    yep it's one of the GSAP engine options . and onComplete will remove listener but if you kill before tween complete , you should to remove that with this : ticker.removeEventListener("tick", render); and another way is this ( without addListener ) : var tick = 0; TweenMax.to('.ball', 30 ,{x:200 , onStart : function(){ tick = 0 }, onUpdate : function(){ tick++ ; if ( tick%60 == 0 ){ // your function call or whatever } } });
  7. Diaco

    onUpdate

    Hi mimeartist you can try something like this : var ticker = new com.greensock.Ticker(1); // tick once per second ticker.addEventListener("tick", render); function render(){ console.log('hi') }; // render is your function to call and can be whatever you want TweenMax.to('.ball', 30 ,{x:200 , onStart:function(){ ticker.addEventListener("tick", render); }, onComplete:function(){ TweenLite.delayedCall(0.01,function(){ ticker.removeEventListener("tick", render) } ) } });
  8. Hi Climber pls check this thread : http://greensock.com/forums/topic/11096-draggable-percentage/
  9. Oh.... Cool.... ! There's always another secret ! ...
  10. To call function at 30fps you can use something like this : function caller(fps,fn){ var x = 0; this.call = function(){ x++; if(x % fps == 1 ){ fn() }; } }; var nCaller = new caller( 30 , render ); // call function 30fps ( max to 60 ) TweenLite.ticker.addEventListener('tick',nCaller.call); // call function 60fps function render(){ console.log('render') };
  11. You read that correctly... but check what you got : " invalid pause tween value: true " that's why i said use paused instead of pause . pls check this out : http://codepen.io/MAW/pen/yOVxeZ btw , you can defined paused tween in this way too : TweenLite.to( obj , 1, { .... } ).paused( true );
  12. Hi Ninili if i understand correctly , the short answer is nope , the order in which you declare the transform properties makes no difference. as you can read in CssPlugin Doc : http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/ In regular CSS, the order that you list the transforms matters but GSAP always applies them in the same order for consistency: translation (x, y, z), then scale, then rotationX, then rotationY, then skew, thenrotation (same as rotationZ) although in terms of constructing the matrix, the math is technically done in the reverse of that order.
  13. Hi hackfin you just have typo issue , pls fix by use paused instead of pause
  14. Great solution Carl ! , actually i thought about something like your solution , but faced to a little issue ; if you have a tween( tweening same property ) between set and revert steps . otherwise your solution is certainly better than mine =) . http://codepen.io/MAW/pen/NNRJVB
  15. Hi xtn nope , for now there isn't any built-in solution , but i think in your case , the simplest way is one of these : /// method 1 : var elem = document.getElementById('blueBox'); // set() step : var oldBackground = window.getComputedStyle(elem,null)["background-color"] || '' ; TweenLite.set(elem,{backgroundColor:'#fff'}); // revert step : TweenLite.to(elem,1,{backgroundColor:oldBackground}); ///////////////////////////////////////////////////////////////////// /// method 2 : var elem = document.getElementById('redBox'); // set() step : TweenLite.set(elem,{backgroundColor:'#fff'}); // revert step : TweenLite.set(elem,{clearProps:'backgroundColor'}); TweenLite.from(elem,1,{backgroundColor:'#fff'}); i don't know what's your scenario/code , but you can use this too : TweenLite.from( elem , 1 , { backgroundColor:'#fff' , paused:true }); and then play that when you want
  16. hmm , there's a tricky way to avoid that : http://codepen.io/MAW/pen/xVELWr
  17. Hi NashEquilibro pls make a simple Codepen Demo for your questions / cases : How to Create a CodePen Demo and pls try this in your tween : chars:"01 " instead of chars:"01"
  18. Hi sorciereus pls add this to your css : transform: translate(-50%,0%); and yep , for the separate delays and smoothest tween ( use x/y & subpixels instead of letterSpacing and pixels ) that's better to use GSAP SplitText plugin .
  19. Hi guys If i understood correctly you need to detect devices width/height , Touch support , maybe sensors , vibrator or ... etc , right !? ... So simply you just need to check those specs for your needs . otherwise what's the difference between desktop and mobile !?
  20. Hi lateek35 at first you don't need to use Math.ceil() , you just need to add roundProps : ' property ' to your tweens ; pls check RoundPropsPlugin Doc : http://greensock.com/docs#/HTML5/Plugins/RoundPropsPlugin/ and pls check this out : http://codepen.io/MAW/pen/adLBQK pls fork above codepen demo with simple shape of your code , if still have any problem .
  21. Diaco

    tween drop-shadow?

    Hi guys i think it's really good thing that browsers render drop-shadow in this way , it can really impact browsers performance . maybe that's better to try something like this tricky way : http://tobiasahlin.com/blog/how-to-animate-box-shadow/
  22. Hi kleeman your tween should be to -(sprite width-(sprite width / frames)) with ease : SteppedEase.config( frames-1 ) pls check this out : http://codepen.io/MAW/pen/mPEgVL
  23. Hi guys yep , i see that on Win 10 too : Chrome Version 49.0.2623.87 m (64-bit)
  24. Hi Acmafali with MorphSVGPlugin you can Morph these SVG tag : <path> <polyline> <polygon> , not group of svg elements ( < g > tag ) There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM.
  25. this's another simple demo ( Draggable demo ) i think can help : http://codepen.io/MAW/pen/JXXMaB/
×