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

 Content Type 

Everything posted by Diaco

  1. Diaco
    Hi dreamoftrees pls check this out : http://codepen.io/MAW/pen/1857a89bf544ef690d91671b7ac1e5ee
  2. Diaco
    Hi kathryn.crawford pls check this out : http://codepen.io/MAW/pen/qOzNLz
  3. Diaco

    Animating height auto

    Diaco replied to Roscoeh's topic in GSAP

    so , this works too : .fromTo(".box", 0.7,{opacity:1},{opacity:.5}) .set(".hidden[data-id="+$(this).attr("data-id")+"]",{display:"block"},0) // set position parametr to 0 .set(".workLarge",{height:'auto'},0) // set position parametr to 0 .from(".workLarge",1,{height:0}) .fromTo(".hidden[data-id="+$(this).attr('data-id')+"]",1,{opacity:0},{opacity:1}); thanks Carl for detailed explanation
  4. Diaco

    Animating height auto

    Diaco replied to Roscoeh's topic in GSAP

    pls check Carl's answer / awesome video about immediateRender here : http://greensock.com/forums/topic/12059-help-with-simple-stagger/?p=53796
  5. Diaco

    Animating height auto

    Diaco replied to Roscoeh's topic in GSAP

    pls try this : .from(".workLarge",1,{height:0,immediateRender:false}) http://codepen.io/MAW/pen/RWmjJa
  6. Diaco

    Animating height auto

    Diaco replied to Roscoeh's topic in GSAP

    Hi celli pls check this out : http://codepen.io/MAW/pen/RWmjJa
  7. Diaco

    SVG Morph

    Diaco replied to Dirk Diggler's topic in GSAP

    Hi Dirk Diggler if i understood correctly , this's Codepen safe Link : https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
  8. Diaco
    Hi venn you can use Sine.easeInOut : http://greensock.com/docs/#/HTML5/Easing/Sine/
  9. Diaco

    issues with Draggable

    Diaco replied to b.briel's topic in GSAP

    Hi Fusion2222 pls try this : Draggable.create(".box", { onDragStart: function(){ console.log("fired just once!"); this.vars.onDragStart = null; } });
  10. Diaco

    Append gradually

    Diaco replied to _Peter_'s topic in GSAP

    Hi _Peter_ Yep , pls make a reduced Codepen Demo for your questions . but for now do you mean something like this ? : http://codepen.io/MAW/pen/62553e457d328d5c5653597c361e982b
  11. Diaco
    Unfortunately we have to focus on GSAP api , not doing projects ... as Carl mention; i've already gone beyond of forums standard . i think that's better to check the Doc. specially this blog post about timeline's position-parameter : Understanding the Position Parameter and fork my second demo , i'm sure you can make your desired result
  12. Diaco
    ok , pls check this out ( Full Page Slider ( GSAP Timeline ) #2 ) : http://codepen.io/MAW/pen/yYradO/
  13. Diaco
    its just a Lable , so you have these lables in your timeline : 'L0' , 'L1' , 'L2' , 'L3' , ... one way to play tweens at same time ( tweens with same label ) , btw with adding labels you can seek to particular label/time in your timeline , and easily make nav dots
  14. Diaco
    Hi plindelauf pls remove this line from your css : white-space: pre-wrap;
  15. Diaco
    good idea ok guys , i will add things ( next/prev & nav dots , draggabel + ... ) thanks both
  16. Diaco
    i've just added 3D rotation : http://codepen.io/MAW/pen/XmozON
  17. Diaco
    Hi coco yep , with timeline it's super easy pls check this out : http://codepen.io/MAW/pen/XmozON
  18. Diaco
    with setting the repeat parameter tweens will repeats with exactly same Vars( includes ease ) , so you need to generate new tween again with above or another method .
  19. Diaco
    Hi nsohail pls check the MorphSVGPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/ you can find all the information you need + video tutorial btw , i don't think it's a good idea to morph complex graphic as your example ( from performance wise ; browsers/devices limitations + natural of svg graphics +... )
  20. Diaco
    Hi kathryn.crawford Nope , for randomise tween pls try like this : var fFire=1 ; function flicker(){ if(!fFire)return false; TweenMax.to(obj,2,{ ..... ,onComplete:flicker}); }; flicker(); you can stop firing the function by setting fFire to 0 ; http://codepen.io/MAW/pen/MaMQry
  21. Diaco

    Concatenating animations?

    Diaco replied to derp's topic in GSAP

    Hi derp if i understood correctly , you can use onReverseComplete event callback , like this: TweenMax.to(div,1,{x:200, onComplete:function(){console.log('playComplete')}, onReverseComplete:function(){console.log('reverseComplete')}, }); pls check the .eventCallback() Doc. : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/
  22. Diaco
    Hi tone4407 Yep , you have some issues in your SVG ( as jack mentioned space at the end + line break in your polygon points + ... ) , you can fix svg issues with this online tool : https://jakearchibald.github.io/svgomg/ pls check this out : http://codepen.io/MAW/pen/yYwXpZ btw , this's the DrawSVGPlugin link ( codepen version ) : https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js
  23. Diaco
    Hi a7med.flash you can use static version of Draggable hit test : var Blue = document.querySelector('#blue'); var Red = document.querySelector('#red'); TweenLite.to(Red,2,{x:300,onUpdate:function(){ var hit = Draggable.hitTest( this.target , Blue , 10 ); console.log(hit); }}); or use js 2D collision detection methods ( same as above code , check with onUpdate fn ) : https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
  24. Diaco

    Carousel help

    Diaco replied to c-andrews's topic in GSAP

    Hi c-andrews the easiest way is this : http://codepen.io/MAW/pen/zveyMP another way is using Trigonometry
  25. Diaco
    Hi Jomungand pls try like this : var myPath = $("#star")[0]; TweenLite.to("#square",1,{morphSVG:myPath}); // or var myPath = $("#star"); TweenLite.to("#square",1,{morphSVG:{shape:myPath}});
×
Login Create Account