Jump to content
GreenSock

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

 Content Type 

Everything posted by Diaco

  1. Diaco
    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 : http://codepen.io/MAW/pen/JXXOQy
  2. Diaco

    multiple circles

    Diaco replied to kempo's topic in GSAP

    Hi kempo pls check this out : http://codepen.io/MAW/pen/dMMVQG
  3. Diaco
    i think that's better to check Draggable Doc. : http://greensock.com/docs/#/HTML5/Drag/Draggable/ as you can read in the Doc : dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute) , allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.
  4. Diaco
    Hi Koloff pls add dragClickables : true to your Draggable create vars
  5. Diaco
    Hi mikel pls check this out : http://codepen.io/MAW/pen/grPVbE 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/
  6. Diaco
    Hi Technics1210 pls make a reduced Codepen Demo of your case/issue available : How to Create a CodePen Demo
  7. Diaco
    Hi WW pls check this out ( css & perspective ) : http://codepen.io/MAW/pen/jqWJyR
  8. Diaco
    Hi crazy1s TweenLite handles tweening properties of js Objects , so pls check this out : http://codepen.io/MAW/pen/rexqwP
  9. Diaco
    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 : http://codepen.io/MAW/pen/xVwWmY
  10. Diaco
    Hi ald603 you can use something like this : http://codepen.io/MAW/pen/MyaWzm 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/
  11. Diaco
    Hi jimeast i think in your case , draggable trigger property is the best and simplest solution , pls check this out : http://codepen.io/MAW/pen/grpWKj
  12. Diaco
    pls check this out : http://codepen.io/MAW/pen/qZEgpm every thing works correctly , pls fork if still have any problem
  13. Diaco
    Hi mrkos67 pls check the .eventCallback() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/eventCallback/
  14. Diaco
    Hi erikb if i understood correctly , pls check this thread : http://greensock.com/forums/topic/12534-pick-value-between-2-css-values-using-gsap
  15. Diaco
    pls check my previous answer again , you can simply use timeline to make your scenario tween sequences .
  16. Diaco
    Hi paulmak pls try this : Draggable.create( parent , { type:'x,y' }); Draggable.create( child , { type:'x', onPress: function(e){ e.stopPropagation() } });
  17. Diaco
    Hi Gardi if i understood correctly , you can use timeScale() , but i think that's better to use something like this : var fps = 30 , framesCount = 16 , dur = (1/fps)*(framesCount-1) ; TweenMax.to('.character',dur,{repeat:-1,backgroundPosition: "-2400px",ease:SteppedEase.config(framesCount)}); http://codepen.io/MAW/pen/RaNEjG
  18. Diaco
    Hi pedropauloalmeida i think these demos can help you : http://codepen.io/MAW/pen/zGZRqY http://codepen.io/MAW/pen/aOzeNR
  19. Diaco
    Hi toru pls check this out : http://codepen.io/MAW/pen/yewWBE
  20. Diaco
    Thanks buddy , Done! pls check out the Throttle version too : http://codepen.io/MAW/pen/yewOgZ
  21. Diaco
    Hi alvisecastagna you can find Simplest Ways in this thread : http://greensock.com/forums/topic/13548-image-sequence-flickering/
  22. Diaco
    in addition to Blake's solution , you can use this little function to call functions at the Start / End of Events like Scrolling and Resizing , ... etc http://codepen.io/MAW/pen/WrdbVY
  23. Diaco

    Transform stacking

    Diaco replied to Learning's topic in GSAP

    Hi Learning it's not possible unless you store transformation info and set again on page load , but in your case seems another js or css have effect on same element , i think that's better to make a reduced Codepen Demo of your case : How to Create a CodePen Demo
  24. Diaco

    How to tween self?

    Diaco replied to Learning's topic in GSAP

    Hi Learning you just have issue in your jquery selector , pls try like this : $( '#group1 , #group2' ).mouseover( function () { TweenLite.to( this,1, { rotation:'+='+360}); }); http://codepen.io/MAW/pen/LGqaYz
  25. Diaco
    Hi Friebel pls check this out : http://codepen.io/MAW/pen/RrENEZ
×
Login Create Account