[Coordinates, scale and rotation]

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

[Coordinates, scale and rotation]

Thanks, I update the pen .. 

 

but this solution does not work if you try another scale value, for example 3

[Coordinates, scale and rotation]

Hello, 

 

My question with this example : 

See the Pen umFdy by NicolasJ (@NicolasJ) on CodePen

 

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

 

[Add logic at half animation]

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

[Add logic at half animation]

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.

 

[Draggable, move, scale, rotate]

Thanks, for your answers.

[Draggable, move, scale, rotate]

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?

[Draggable, move, scale, rotate]

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 ?

 

[Flex and new tweening version]

Rhoo ...

sorry for this post ... 

Thanks Jack

[Flex and new tweening version]

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

[Rotation in real IE8 ?]

Hello both,

 

many thanks for your answers.

jamiejefferson, I do share your point about testing

 

Best

[Rotation in real IE8 ?]

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

[Rotation in real IE8 ?]

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

 

[Draggable invert bounds behavior]

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 !!!

[Draggable invert bounds behavior]

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();
                    });
                }
            });
        });
    });

[Draggable invert bounds behavior]

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

[Draggable invert bounds behavior]

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 

[Draggable invert bounds behavior]

If I use the Draggable class you provided in this post, start with the example just above (

See the Pen be7860bda7150f574fe08ac3daa51e01 by GreenSock (@GreenSock) on CodePen

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

[Draggable invert bounds behavior]

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

[Draggable invert bounds behavior]

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

 

[Draggable invert bounds behavior]

Is this a similar issue when image is scaled ? (I used ThrowPropsPlugin to change scaleX and sclaeY properties)

[Draggable invert bounds behavior]

hi Jack,

 

it works as expected in my case.

again many thanks for your help and reactivity,

 

best

[Draggable invert bounds behavior]

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

[Draggable invert bounds behavior]

i have confused for sure

 

In fact,

edgeResistance:1 (full resistance, object can NOT be dragged out of bounds at all)

 

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

[Draggable invert bounds behavior]

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