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

Moderators
  • Posts

    1,215
  • Joined

  • Last visited

  • Days Won

    86

Everything posted by Diaco

  1. 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

    Hi kempo pls check this out : http://codepen.io/MAW/pen/dMMVQG
  3. 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. Hi Koloff pls add dragClickables : true to your Draggable create vars
  5. 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. Hi Technics1210 pls make a reduced Codepen Demo of your case/issue available : How to Create a CodePen Demo
  7. Hi WW pls check this out ( css & perspective ) : http://codepen.io/MAW/pen/jqWJyR
  8. Hi crazy1s TweenLite handles tweening properties of js Objects , so pls check this out : http://codepen.io/MAW/pen/rexqwP
  9. 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. 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. 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. pls check this out : http://codepen.io/MAW/pen/qZEgpm every thing works correctly , pls fork if still have any problem
  13. Hi mrkos67 pls check the .eventCallback() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/eventCallback/
  14. 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. pls check my previous answer again , you can simply use timeline to make your scenario tween sequences .
  16. Hi paulmak pls try this : Draggable.create( parent , { type:'x,y' }); Draggable.create( child , { type:'x', onPress: function(e){ e.stopPropagation() } });
  17. 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. Hi pedropauloalmeida i think these demos can help you : http://codepen.io/MAW/pen/zGZRqY http://codepen.io/MAW/pen/aOzeNR
  19. Hi toru pls check this out : http://codepen.io/MAW/pen/yewWBE
  20. Thanks buddy , Done! pls check out the Throttle version too : http://codepen.io/MAW/pen/yewOgZ
  21. Hi alvisecastagna you can find Simplest Ways in this thread : http://greensock.com/forums/topic/13548-image-sequence-flickering/
  22. 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

    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?

    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. Hi Friebel pls check this out : http://codepen.io/MAW/pen/RrENEZ
×