NicolasJ
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by NicolasJ
-
Pen updated. I think that the solustion for DoIt3 is centerX = (useCenter ? (containerW - blocW * scale) / 2 -(blocW - blocW*scale)/2: -(blocW - blocW*scale)/2); centerY = (useCenter ? (containerH - blocH * scale) / 2 -(blocH - blocH*scale)/2: -(blocH - blocH*scale)/2); Due to the fact that the scale is from the center of the object
-
Thanks, I update the pen .. but this solution does not work if you try another scale value, for example 3
-
Hello, My question with this example : http://codepen.io/NicolasJ/pen/umFdy How to ensure that when "Center" is unchecked and click on the button "DO IT 2" the red block is positioned correctly. That is to say that the two upper corners are aligned and the result is displayed [t = 0 | b = 290 | l = 0 | r = 50] and not [55 t = | b = 235 | s = 55 | r = 5] How to ensure that when "Center" is checked and click on the "DO IT 3" button the red block is centered on the gray block? In summary, my question is how to properly calculate the sets of coordinates which I want to go in both cases (centered checked and unchecked) and keeping transformOrigin:"50% 50%". Hoping to be sufficiently clear Thanks
-
Hello Rodrigo, Carl, Many many thanks for these examples. This was exactly what I was looking for. Now, we do not know what to choose Nicolas
-
Hello, I would like to know if there is way to execute any logic at half animation. For example : TweenLite.to($(item), 3, {rotationY: 180}); and at 1.5 s. execute : TweenLite.set($(otherItem), {alpha: 0}); best.
-
Thanks, for your answers.
-
Hello Jonathan, thanks for your answer. this is actually what I'm gone. Suddenly comes another question, what should I use in GSAP? I went on ThrowPropsPlugin, is this a good idea?
-
Hello, Is someone tried to extend "Draggable" to make it possible to use the multi-touch and so with two fingers simultaneously rotate, scale and move an object ? This is a general question but I did not really find an answer on the forum. Before leaving for prototyping I'm not sure this is possible. Is someone has any feedback on this point ?
-
Rhoo ... sorry for this post ... Thanks Jack
-
Hello, I just downloaded the last AS3 version. Copied it in my project and just start a compilation (this is a Flex project). I have several errors : Description Resource Path Location Type 1061: Call to a possibly undefined method initClass through a reference with static type Class. TweenCore.as /<myproject>/src/com/greensock/core line 84 Flex Problem Description Resource Path Location Type 1061: Call to a possibly undefined method remove through a reference with static type com.greensock.core:SimpleTimeline. TweenCore.as /<myproject>/src/com/greensock/core line 219 Flex Problem Description Resource Path Location Type 1067: Implicit coercion of a value of type com.greensock.core:SimpleTimeline to an unrelated type com.greensock.core:TweenCore. TweenCore.as /<myproject>/src/com/greensock/core line 241 Flex Problem In TweenCore line 83 : Multiple markers at this line: -Access of undefined property rootFrame -1119: Access of possibly undefined property rootFrame through a reference with static type Class. is it a regression ? Best, Nicolas
-
Hello both, many thanks for your answers. jamiejefferson, I do share your point about testing Best
-
Hello again, one guy make the test for me on a windows vista and a real internet explorer 8 (IE : 8.0.6001.19443). And it works fine .....
-
Hello, I do not have any real internet explorer 8, just the compatibility mode of IE10 on a Windows 7. I saw on the forum that it could have some issues with the compatibility mode. Thus, I wonder if someone could confirm or not that this example below works on a real IE8 (and IE7 if possible) The problem I have is that the rotation does not work. There is strange behavior. <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=1000" /> <title>ROTATION</title> <style>body {margin: 50px;background-color: #000;font-family:Arial, Helvetica, sans-serif;}#box {position: absolute;}</style> </head> <body> <button id="rotate">rotate</button> <div id="box"><img src="http://www.snorkl.tv/images/crab.png"></div> <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script> <script> $(function() { $("#rotate").on("click", function() { TweenLite.to("#box", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut }); }); }); </script> </body> </html> Best
-
Hi, it works well. I have not had time to test different scenarios, but I will take time next week. I will make some returns if it makes sense. Thank you !!!
-
One point that may be important. Let's consider the modification of the snap object like this : snap: { x: function(endValue) {return Math.max(this.xMin - 20, Math.min(this.xMax - 20, endValue));}, y: function(endValue) {return Math.max(this.yMin - 20, Math.min(this.yMax - 20, endValue));} } After the creation of the draggable object, the image is not at the right place. just a click on the image and it goes to the right place. Apply a rotation, then the image is not to the right place. just a click on the image and it goes to the right place. The js code of this example : $(function() { var draggables = Draggable.create($("#drag"), { edgeResistance:0.85, throwProps:true, bounds:$("#wrapper"), type:"x,y", resistance:1000, snap: { x: function(endValue) {return Math.max(this.xMin - 20, Math.min(this.xMax - 20, endValue));}, y: function(endValue) {return Math.max(this.yMin - 20, Math.min(this.yMax - 20, endValue));} } }); $("#rotate").on("click", function() { TweenLite.to("#drag", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut, onUpdate :function() { $.each(draggables, function(index, value) { value.applyBounds(); }); } }); }); });
-
Hi Jack, yes it works well, many thanks again. The example above could be modified like this now : $(function() { var draggables = Draggable.create($("#drag"), { edgeResistance:0.85, throwProps:true, bounds:$("#wrapper"), type:"x,y", resistance:1000, snap: { x: function(endValue) {return Math.max(this.xMin, Math.min(this.xMax, endValue));}, y: function(endValue) {return Math.max(this.yMin, Math.min(this.yMax, endValue));} } }); $("#rotate").on("click", function() { TweenLite.to("#drag", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut, onUpdate :function() { $.each(draggables, function(index, value) { value.applyBounds(); }); } }); }); }); According to the problem with IE7 and IE8, it comes from the fact that this is an image that is draggable. Just put the image in a <div/> and it will work in IE7 and I8. Best
-
The example I wrote above do not work on IE7 and IE8. I did something wrong ? The example Throw of this page http://www.greensock.com/draggable/ works fine on IE7 and IE8
-
If I use the Draggable class you provided in this post, start with the example just above (http://codepen.io/GreenSock/pen/be7860bda7150f574fe08ac3daa51e01) and modified this example like this : <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=1000" /> <title>GreenSock Draggable and ThrowPropsPlugin Demo</title> <style>body {margin: 50px;background-color: #000;font-family:Arial, Helvetica, sans-serif;}h1 {color:white;}#wrapper{position:relative;width:200px;height:200px;background-color:#ccc;overflow:hidden;}</style> </head> <body> <button id="rotate">rotate</button> <div id="wrapper"> <img id="drag" src="http://www.snorkl.tv/images/crab.png"> </div> <script src="js/jquery/jquery-1.10.2.js"></script> <script src="js/greensock/plugins/ThrowPropsPlugin.js"></script> <script src="js/greensock/plugins/DirectionalRotationPlugin.js"></script> <script src="js/greensock/utils/Draggable.js"></script> <script src="js/greensock/TweenMax.js"></script> <script> $(function() { Draggable.create($("#drag"), { edgeResistance:0.85, throwProps:true, bounds:$("#wrapper"), type:"x,y", resistance:1000, snap: { x: function(endValue) {return Math.max(this.xMin, Math.min(this.xMax, endValue));}, y: function(endValue) {return Math.max(this.yMin, Math.min(this.yMax, endValue));} } }); $("#rotate").on("click", function() { TweenLite.to("#drag", 0.95, { directionalRotation:'+=90_short', ease:Power3.easeOut }); }); }); </script> </body> </html> Click on the button to apply the rotation. You'll see that after the rotation, the image will not fill the container. Just do a simple click on the image, then the image will fill the container. What I wanted to say was : a method "update" in Draggable could be called when needed (in this example on the onComplete of the rotation) that allow the image to be in the right place. Otherwise, in the onComplete rotation we need to implement calculations similar to those of the Draggable, to have the image in the right place. I did the calculations to put the image in the right place. So I have no problems with this behavior. Maybe this method is useless because few people will be in this case.
-
Yes I used it. I try to correctly position the image after rotation. Perhaps a method Update in Draggable should be interresting? Because a simple click refreshes the position. Anyway I do it outside the Draggable file Thanks for the time you spent. Best
-
Sorry there is no problem with the scale. I was confused by the fact that x and left are differents after a scale of the drag element. However, ater an action on the image (rotation in this case), it is not possible to force the refresh of the draggable item to let it respect the bounds defined by xMin, xMax, yMin and YMax. Thus some white space could appears. I tried to calculate xmin, xmax, ymin and ymax on the complete event of the rotation, and then use the ThrowPropsPlugin.to method. But it seems that I was not able to calculate with precision the same values as the Draggable class Is there a method to retrieve the bounds of an element ? (The draggable you provided here is not the deploy on the cdn, thus I did not create a jsfiddle).
-
Is this a similar issue when image is scaled ? (I used ThrowPropsPlugin to change scaleX and sclaeY properties)
-
hi Jack, it works as expected in my case. again many thanks for your help and reactivity, best
-
Hi, is there any way to apply a rotation to the image and keep the same behavior ? I try to modify the example you provided, adding a button that apply a rotation : $("#rotate").on("click", function() {TweenLite.to("#drag", 0.95, {directionalRotation:'-=90_short'});}); but white space appears, as if the draggable item do not consider the rotation. Best
-
i have confused for sure In fact, let me think that using bounds and edgedResistance with the element bigger than the container have no sense. There are some subtleties that I do not understand. Based on the codepen example and introducing the ThrowProps it appears that the behavior is exactly what I am looking for. many thanks Carl for your help
-
Thanks Carl for your answer, in fact, as my box is bigger than the container edgeResistance must be set to 0. What could be interesting for me is exactly the invert.: setting the edgeResistance to 1, and then, any edges of the box could not go inside the container. But I assume that this not possible with the actual Draggable version. Best
