Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

NicolasJ

Members
  • Posts

    36
  • Joined

  • Last visited

Posts posted by NicolasJ

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

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

     

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

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

     

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

     

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

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

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

     

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

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

    • Like 1
  14. 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

×