Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Diaco last won the day on December 20 2017

Diaco had the most liked content!

Diaco

BusinessGreen
  • Posts

    1,215
  • Joined

  • Last visited

  • Days Won

    86

Community Answers

  1. Diaco's post in Trouble with Draggable startDrag on touchmove of different element was marked as the answer   
    Hi phidur 
     
    if I understand correctly what are you trying to achieve, you can simply use draggable trigger property;
     
    pls check this out:  See the Pen GNParR by MAW (@MAW) on CodePen

  2. Diaco's post in How do I apply a class animate child Elements? was marked as the answer   
    Hi Guys
     
    pls try this : 
    CSSPlugin.cascadeTo(".parent", 1, {className:"+=on", delay:2}); See the Pen KNrBVb?editors=0110 by MAW (@MAW) on CodePen

  3. Diaco's post in Staggering scale multiple g elements inside a svg was marked as the answer   
    Hi  iuscare 
     
    you just need to set transformOrigin like this : 
    TweenMax.staggerFrom(listItems, .4, {scale:0,transformOrigin:'center'}, 0.3);
  4. Diaco's post in How to jump to label in nested timeline? was marked as the answer   
    Hi qarlo 
     
    pls try these methods :  See the Pen vydbbB by MAW (@MAW) on CodePen

      masterTl.seek( childTl.getLabelTime('labe') ); // if childTl added and start from time '0' in master timeline   masterTl.seek( childTl.startTime()+childTl.getLabelTime('labe') ); // if childTl position in another time in master Tl
  5. Diaco's post in Animate hidden elements into view was marked as the answer   
    method #2 is what you're looking for , you just need to add a .set() at the beginning . pls check the pen again
  6. Diaco's post in Possible to animate gradientTransform in SVG's? was marked as the answer   
    Hi Matt Hoover 
     
    pls check this out :  See the Pen MwbRoL by MAW (@MAW) on CodePen

  7. Diaco's post in X,Y and rotation drag on one element via two triggers was marked as the answer   
    it's native javascript event : https://developer.mozilla.org/en-US/docs/Web/Events/touchstart
  8. Diaco's post in strange behaviour TweenMax with transform svg was marked as the answer   
    Hi chriswyl 
     
    it's about transform matrix multiplication , in your third example , pls check the result with remove x,y attributes from text and set transform to this :
    transform=" translate(100,100) rotate(40 100,100) " but if you want to have that result you liked , pls try this :
    TweenMax.set($("#t2"), { attr:{ x:x , y:y } , rotation:rot , svgOrigin:x+' '+y });
  9. Diaco's post in Jerky scaling of image was marked as the answer   
    Hi johnnyno 
     
    Pls use x,y properties instead of top/left , pixel snapping is cause of that jerky motion , with x,y you will use subpixels 
  10. Diaco's post in Draggable and saving the position was marked as the answer   
    Hi ochalmers 
     
    pls check this out :  See the Pen bprjrz by MAW (@MAW) on CodePen

  11. Diaco's post in Draggable : Object wider than bounds was marked as the answer   
    Hi swann 
     
    pls check this out : https://jsfiddle.net/fx6rf688/
  12. Diaco's post in Center rotation svg group was marked as the answer   
    you can simply use circle cx/cy as svgOrigin reference , so your group center is : svgOrigin: ' 389.74  420.437 '
  13. Diaco's post in Draggable start position was marked as the answer   
    Hi blue-infinity 
     
    pls check this out :  See the Pen Kzmxay by MAW (@MAW) on CodePen

  14. Diaco's post in Force a tween to complete by killing it was marked as the answer   
    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();   } }
  15. Diaco's post in SVG apply transform attribute with Draggable was marked as the answer   
    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 :  See the Pen RaVPEB by MAW (@MAW) on CodePen

     
     
     
     
     
  16. Diaco's post in Get percentage with Draggable was marked as the answer   
    Hi Climber 
     
    pls check this thread : http://greensock.com/forums/topic/11096-draggable-percentage/
  17. Diaco's post in ScrambleText Plugin div width was marked as the answer   
    hmm , there's a tricky way to avoid that :  See the Pen xVELWr by MAW (@MAW) on CodePen

  18. Diaco's post in Flicker when tweening Sprite was marked as the answer   
    Hi kleeman 
     
    your tween should be to    -(sprite width-(sprite width / frames))    with    ease : SteppedEase.config( frames-1 )
     
    pls check this out :  See the Pen mPEgVL by MAW (@MAW) on CodePen

  19. Diaco's post in Syncing a timeline with a video was marked as the answer   
    Hi friendlygiraffe 
     
    you can use TweenLite.ticker to sync tween progress with video currentTime on every tick .
     
    something like this :
    var vid = document.getElementById("myVideo"); var tween = TweenMax.to( obj , 2 , { ... , ease:Linear.easeNone , paused:true }); function Update(){   tween.progress( vid.currentTime/vid.duration ) }; vid.onplay = function() {     TweenLite.ticker.addEventListener('tick',Update); }; vid.onpause = function() {     TweenLite.ticker.removeEventListener('tick',Update); };  
    pls check this out :  See the Pen JXXOQy by MAW (@MAW) on CodePen

  20. Diaco's post in Repeating tweens with random duration was marked as the answer   
    Hi mikel 
     
    pls check this out :  See the Pen grPVbE by MAW (@MAW) on CodePen

     
    you can simply use these methods : 
     
    .duration() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/duration/
     
    .timeScale() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/timeScale/
     
    .repeatDelay() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/repeatDelay/
  21. Diaco's post in How to fix text blurry in 3D rotation? was marked as the answer   
    Hi WW 
     
    pls check this out ( css & perspective ) :  See the Pen jqWJyR by MAW (@MAW) on CodePen

  22. Diaco's post in How do I kill tweens past a certain point in time? was marked as the answer   
    Hi dax006 
     
    if i understand correctly , you can use this little function :
    function RemoveTweensBefore( timeline , myObject , time ){     var Tweens = timeline.getTweensOf( myObject );         for (var i = 0 , Tween ; i < Tweens.length; i++) {           Tween = Tweens[i] ;           if( Tween.startTime() < time && Tween.endTime() < time ){           timeline.remove( Tween );         }     }; }; // and then document.getElementById('remove').addEventListener('click',function(){     //tl.pause(0);     RemoveTweensBefore( tl , Red , 1 )     tl.restart(); }); pls check this out :  See the Pen xVwWmY by MAW (@MAW) on CodePen

  23. Diaco's post in Trigger TweenTo on Scroll was marked as the answer   
    Hi ald603 
     
    you can use something like this :  See the Pen MyaWzm by MAW (@MAW) on CodePen

    document.addEventListener("mousewheel",Go); document.addEventListener("DOMMouseScroll",Go); function Go(e){    var Tl = tl1 , SD = e.wheelDelta || -e.detail ; if( SD>0 && Tl.getLabelBefore()!=null ){ Tl.tweenTo( Tl.getLabelBefore() ) }else if( SD<0 && Tl.getLabelAfter()!=null ){ Tl.tweenTo( Tl.getLabelAfter() ) }; }; pls check the TimelineMax Doc. :
    .getLabelAfter() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/
    .getLabelBefore() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelBefore/
     
  24. Diaco's post in event propigation issue in Firefox and Edge was marked as the answer   
    Hi jimeast 
     
    i think in your case , draggable trigger property is the best and simplest solution ,
     
    pls check this out :  See the Pen grpWKj by MAW (@MAW) on CodePen

  25. Diaco's post in using set for interpolated color values was marked as the answer   
    Hi erikb 
     
    if i understood correctly , pls check this thread : http://greensock.com/forums/topic/12534-pick-value-between-2-css-values-using-gsap
×