jollibee

Members
  • Content count

    15
  • Joined

  • Last visited

Community Reputation

4 Newbie

About jollibee

  • Rank
    Member
  1. jollibee

    Drag drop on multi transformed node

    Great job. I will update the draggable to latest when new release coming.
  2. jollibee

    Drag drop on multi transformed node

    Sure, that's what I'm trying to do: rewrite the html structure, and position/tween each element. Just wondering if there is a better and elegant solution for such case. Update: Drag drop works on Android/Mac chrome after I merge transform into one node.
  3. jollibee

    Drag drop on multi transformed node

    It's a real-world project. I made more demo on this. Demo1 with drag drop problem on chrome: Demo2, works on chrome (remove the outer2, position: absolute):
  4. jollibee

    Drag drop on multi transformed node

    <div id="outer2" style="transform, rotate, and scale"><svg>...</svg></div> <div id="outer3" style="transform and scale"></div> <div id="outer4" style="transform and scale"></div> I will try this approach firstly. Remove outer1, separate the sub divs and set style with TweenMax.
  5. jollibee

    Drag drop on multi transformed node

    It is a real world project. I got the problem in my project, and then I'm trying to simplify the problem use the codepen demo. https://stackoverflow.com/questions/27146742/foundation-force-landscape-mode-on-mobile-devices, The rotation feature is something like this. I force a landscape mode when loading a page into a mobile app (the app is portrait itself and screen is locked by OS). There are some animations and drag drops inside the page. Everything works great except drag drop on Android Chrome (Mac Chrome has the problem too). Safari works in my case. The 'outer1' in the project is like the container, similar to document.body. The 'outer2' is another div in my project. The svg is in the outer2 div, and there are some drag drop elements inside the svg. There are also, 'outer3', 'outer4', 'outer5' inside 'outer1', that's why I cannot scale firstly and then rotate. It will be great if there is a solution for this. Otherwise, I have to deal with another approach for my case.
  6. jollibee

    Drag drop on multi transformed node

    It works for transform firstly, and then rotate. In your case. But I got problem when rotate outer1, then move outer2. Check this:
  7. jollibee

    Drag drop on multi transformed node

    Drag drop does not work if the svg node under two transformed div: <div style="transform: rotate(90deg)"> <div style="transform: translate(20%, -10%) scale(1.2)"> <svg>...</svg> </div> </div> Check the codepen. The object will go up if drag it to the bottom. Test on chrome Version 65.0.3325.181 (Official Build) (64-bit) for macOS 10.13.4.
  8. jollibee

    Drag along an svg path

    Great job. I will start from this demo.
  9. jollibee

    Drag along an svg path

    I will take a look at the links. Also, I'm think about split the path into multi line for complicated shape.
  10. jollibee

    Drag along an svg path

    The circle move along the path with animation in this example. But how to do that with draggable plugin, drag the circle along the path.
  11. jollibee

    How to get delta value change of current attibute?

    Works for me, thank you.
  12. TweenMax.to("#redBox", 1, {left:500, ease:Linear.easeNone, onUpdate: updateFunc, onUpdateParams:['{self}']}) function updateFunc(tween){ console.log(tween); // How to get delta value of left? } How to get the value different on 'left' attribute in onUpdate function? (current.left - last.left) Thank you.
  13. jollibee

    Rotation around center in Safari is different from Chrome

    It works on Safari. So we can write some code to analyze the transform on group and set use TweenMax. Thank you.
  14. jollibee

    Rotation around center in Safari is different from Chrome

    I can help you to test safari. Let me know if there is anything I can do. Thank you.
  15. There is a group in the svg named 'p1-1_abc_1', and set transformOrigin: 'center center'. It works great in Chrome, but the position of 'p1-1_abc_1' jumped in safari when the timeline start. Safari: Version 10.1.1 (12603.2.4) Chrome: Version 58.0.3029.110 (64-bit)