Jump to content

Diaco last won the day on December 20 2017

Diaco had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Diaco

  1. blake , you are right about result of 0.1+0.2 , but if you try that for a thousand times , always you will get same result . in the other hand we have that issue in browsers randomly ( with ie you will get that undesired result for more times) it's not about one factor ( how browsers will deal with raf , subpixels , calculation speed , tweens ease type ...etc ) , be sure it's about browser perfomance
  2. Hi markussali pls check .staggerTo() method Doc. ; Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }})
  3. Hi kez1304 pls check this blog post : http://greensock.com/gsap-1-18-0 you can find all the information about GSAP api here : http://greensock.com/docs/#/HTML5/
  4. Hi kez1304 you can use .progress() method : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/progress/
  5. Hi gmullinix if you just want to use timeline , you can do like this : //.to("#knob",1,{rotation: 42}) .add(function(){ TweenLite.to("#knob",1,{rotation: 42}) })
  6. hmm, yep it's kinda one of the ie issues , don't forget you're using draggable type:'x' and subpixels instead of pixels , if you want to get draggable target left prefect pixel position , pls use type:'left' and you can get position by this this.target.offsetLeft , or via jquery . but after all that's better to use this.x
  7. Hi PointC works correctly , pls try like this : Draggable.create("#dragControl", { type:"x", throwProps:true, bounds: dragStop, snap:arr, onThrowComplete: function() { var final = arr.indexOf(this.x); console.log("Final position was: " + this.x +" and the final index was:" + final); } });
  8. Hi ucraft.me as Jonathan mentioned , pls make a reduced Codepen Demo available .
  9. just 2 points : - pls use last version of GSAP ( 1.18.1 ) , currently you load very old version : 1.8.4 - after version 1.8.0 , you don't need to used css:{} object for CSS properties pls check this out : http://codepen.io/MAW/pen/xZwpRq
  10. Hi blueblau if i understood correctly , you need to pause your Tween/Timeline , pls try like this : var tl = new TimelineMax({paused:true}); tl.to(".start",1,{className:"finish"}); tl.progress(0.5); or var tl = new TimelineMax(); tl.to(".start",1,{className:"finish"}); tl.progress(0.5).pause();
  11. Hi Juc1 if you want to tween svg child elements ( rect / circle ...etc ) , pls use ' x ' property instead of ' left ' , and i think you need to add overflow:visible to your css for svg : svg{ overflow:visible }
  12. if you want to test/play with Club GreenSock bonus plugins on Codepen , you can find codepen safe version here ( which can only be used on codepen ) : http://codepen.io/GreenSock/pen/OPqpRJ/
  13. Hi dario001 if i understood correctly , pls try like this : Draggable.create(elem, { type: "x,y" , lockAxis: true, onDrag:function() { console.log( this.lockedAxis ); if( this.lockedAxis=='y' ){ console.log('this.x : '+this.x) }else{ console.log('this.y : '+this.y) } } });
  14. Hi reworked pls use .add() method instead of .call() , like this : .add( myFunction( param1 , param2 ) )
  15. pls use .set() method instead of jquery .css() , like this : TweenLite.set("#image",{x:newX,y:newY,width:imageWidth,height:imageWidth*imageAspect}) btw , i don't check other parts of your code .
  16. Hi paprika pls make a reduced Codepen Demo available : How to Create a CodePen Demo
  17. Hi iamacatperson pls check this out : http://codepen.io/MAW/pen/wMapvO
  18. Hi guit4eva We have to focus on supporting GSAP api , not ScrollMagic . you could contact its author . if you have any question about GSAP please feel free to ask here and be sure we'll be delighted to help .
  19. Hi iamacatperson one way is simply use a variable : http://codepen.io/MAW/pen/XXbWqX
  20. Hi eloisem in addition to Jonathan's advice ; i think this thread can help too : http://greensock.com/forums/topic/11728-draggable-cursor/
  21. Hi Jonny pls try like this : var loop=3 , tl = new TimelineLite(); tl.to(greenBox, 2, {x:250}) .to(redBox, 2, {y: 150, x: 250},'restartPoint') .add(function(){ if(loop){ tl.play('restartPoint'); loop--; } });
  22. Hi friendlygiraffe pls try this : TweenMax.ticker.addEventListener('tick', Update); var start = new Date(); function Update(){ var now = new Date(); DisplayDiv.innerHTML = now-start; }; http://codepen.io/MAW/pen/yeyEVj
  23. Hi Anitainment i think your browser still use cashed js files , for me works correctly , pls add something like '?50' at the end of js address to force browser to load new draggable , like this : https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js?v14
  24. Diaco

    Synchronise animation

    Hi Regis pls check this blog post about Position Parameter : Understanding the Position Parameter
  25. Hi C.Surieux I've updated the pen : http://codepen.io/MAW/pen/gbwzoM