Diaco had the most liked content!

# Diaco

1,215

86

1. ## Draggable start position

Hi blue-infinity pls check this out : http://codepen.io/MAW/pen/Kzmxay
2. ## Rotating a spinning object around a central point

Hi guys in addition ; you can use a bezier Tween too : https://codepen.io/MAW/pen/VabQZK
3. ## Force a tween to complete by killing it

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. ## SVG apply transform attribute with Draggable

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. ## Offsetting the center point for an element moving along a bezier

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. ## 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. ## 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. ## Get percentage with Draggable

Hi Climber pls check this thread : http://greensock.com/forums/topic/11096-draggable-percentage/
9. ## Tween 18000px wide image on canvas

Oh.... Cool.... ! There's always another secret ! ...
10. ## Tween 18000px wide image on canvas

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. ## invalid pause tween value: true

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. ## Transform chaining in GSAP

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. ## invalid pause tween value: true

Hi hackfin you just have typo issue , pls fix by use paused instead of pause
14. ## Tweening to original state before .set()

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. ## Tweening to original state before .set()

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. ## ScrambleText Plugin div width

hmm , there's a tricky way to avoid that : http://codepen.io/MAW/pen/xVELWr
17. ## ScrambleText Plugin div width

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. ## Letter Spacing inquiry

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. ## Your snippet for: mobile detection.

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. ## Tween in my timeline doesn't reverse

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 .

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. ## Flicker when tweening Sprite

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. ## Latest Chrome update 49 causes animation jitters (scale)

Hi guys yep , i see that on Win 10 too : Chrome Version 49.0.2623.87 m (64-bit)
24. ## Morphing help - cannot morph a <G> SVG element.

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. ## Syncing a timeline with a video

this's another simple demo ( Draggable demo ) i think can help : http://codepen.io/MAW/pen/JXXMaB/
×