Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

2,111 profile views

Brickyenne's Achievements



  1. Hello, I'm porting an app over to Windows Phone 8 that is currently working in iOS6,7 and any version of Android however when testing the exact same code in WP8, elements can't be dragged. Placed alerts inside the onDragStart and onDrag events but they are never fired. This is a mobile app that's supposed to be running on an IE10 instance (Intel XDK/appframework.js webview). I have has some experience in the past with special test cases and this is no different. Building a special test case may end up solving the issue 'cause special test cases may not represent the exact same conditions that produce the issue. Actual code is very easy. Just create 4 draggable images. If you take this code and run it in Ripple emulator it works no problem. Are there any special conditions for Draggable to work in WP? like absolute positioning on the elements or some microsoft-specific directive for touch/drag events?. Code is running latest version of GSAP pulled from GitHub. Thank you, your help will be appreciated.
  2. Hello, I'm using Draggable with onDragEnd and onDragStart events to perform some tasks. In order to complete the onDragEnd tasks I need some variables defined inside the onDragStart function be visible inside the onDragEnd function. I see that's the purpose of onDragStartScope but it's not very explicit on how actually do that. Can you clarify this a bit more please? Thank you, your help will be appreciated.
  3. Yep, I understand that, I mean, there's no other way of figuring out that. However program is very complex right now and would be very time consuming to "assemble" a special test case that in the end may up solving the issue by not including every involved variable. In this case, I'm going to try to solve it. In fact experimenting a little, changed the container and now, image jumped out of the viewport. This is clearly showing the issue has to do with the container. Since I'm using an UI framework, let me try by defining a new container and see what happens. I'll post the results here to help others that may face the same problem. Thank you!
  4. Hello, Here again with a weird issue: When making an image draggable (using "type" as top,left) it jumps to the left viewport margin out of the mouse or finger touch. Then, if touched again, it remains under the mouse or finger with no problems. That behavior wasn´t present when using type x,y. Changed to top,left to better handle the end X or Y points when ending the drag event. Any clue about this weird behavior? Your help will be appreciated.
  5. Brickyenne

    Get Draggable

    Thank you so much Jack, corrected it and works! You're right I was making the call at the end! (it was late, last night). Keep up with the good work! Thanks again!
  6. Brickyenne

    Get Draggable

    Hello, I'm also trying to get the current x and y coordinates of an element, although while they are in motion (as they are being dragged) or "live". I'm using: function draggedAnimalObserver(identifier){ var draggable = Draggable.get("#fig" + identifier); var animalTopPosition = draggable.y; console.log(animalTopPosition); } Also used update() but all I get is the position after re-touching element (releasing and touching again pops out value). How can I get the live position data or at least get the values after releasing without need of touching again ? Your help will be appreciated.
  7. Thank you for the quick response guys! Well, yeah I think it's the css, but no, no backface-visibility hidden anywhere. I'll build a test case as time allows since App is quite large and it implies re-writing a great portion of the app. Already built a very small test sample and it works, as is not representative of the actual scenario where the problem is happening. Let me take a look at the code samples you provided and will come back to you with a reduced test case, ok? Thank you!
  8. Hello, I'm using TweenMax for animating some cards. In one of the animations I want to apply a 3D transform in order to flip a card and show the reverse side. Well, when the card is rotating and hits the 90 ( at 12 o'clock ccw as seen from top) degree mark it disappears all the way up to the 270 degree mark (ccw at 6 o'clock) then appears again. That is, if want to rotate 180 degrees to show the card back, the card is invisible! If the animation is repeated the weird behavior begins earlier, making this card invisible if touched! For testing purposes, eliminated the 3D transform part of the animation and everything works as designed. I'm sharing the javascript code where this is happening. This application is quite large so it isn't practical to share here the whole code to see the various events and animations added to the cards. In this portion of the code, if the line where the rotationY is commented out all works ok. Isolated the image in an example to test and everything works ok. Clearly this has to do with the fact that several animations and events are acting on these images and something is in conflict. Any ideas? Your help will be appreciated. //------------------------------- Shows selected card ----------------------------------- function showCard(selectedAngel){ counter2++; cardBeingRead(selectedAngel); TweenMax.set(selectedAngel, {transformPerspective:200, position:"absolute"}); var angel = new TimelineMax(); angel.to(document.getElementById(selectedAngel), 0.2, {rotation:0}) .to(document.getElementById(selectedAngel), 1, {"left":"10%", "top":"100px"}); //.to(document.getElementById(selectedAngel), 1, {transformOrigin:"50% 50%", scale:1.5, rotationY:180}) setTimeout(function(){ showMessage(selectedAngel)}, 1000); }
  9. Carl, Well, I'll definitely mock up a test file. I'll try to find the time today. Tomorrow is deadline to finish this App. Android 2.3.6 and 2.3.7 are showing problems. It works on 4.1.1 Did notice the difference between App 1 (where rotation works on 2.3.x) and App 2 (where rotation isn't working on 2.3.x) is the syntax and the bezier being applied before the tweening on App 2. +App 1: TweenMax.to(element, duration, {top:"", left:"", rotation:... +App 2: TweenMax.to(element, 1.8, {bezier:{values:[.....], autorotate:true}}); TweenMax.to(element, duration, {css:{top:"", left:"", rotation... However, removed css from syntax and no luck, still no rotation which makes me think the main difference is the bezier. I'll build a test in this way, then remove the bezier and see the results. Thank you!
  10. Mmmm...it's quite large and complex, animations, event binding and unbinding, dynamic css-property modification, it would require building a sample ( this means opening another pandora's box and deal with a new animal, debug it, make it work, etc, etc) that will consume dev time...what if .zip the whole thing and email it to you? Code is commented and although somewhat complex my coding style is easy to follow. What do you say? Thank you!
  11. All right. Here it is: // Card not following curvature. It's a circle. TweenMax.to("#card1", 1.8,{bezier:{ values:[{left:10, top:10}, {left:60, top:10}, {left:130, top:10}, {left:200, top:10}, // Circle starts here {left:244, top:21}, {left:270, top:42}, {left:277, top:51}, {left:293, top:94}, // Max right {left:283, top:127}, {left:270, top:146}, {left:244, top:167}, {left:200, top:181}, // Bottom max {left:156, top:167}, {left:130, top:146}, {left:117, top:127}, {left:109, top:106}, // Left max {left:117, top:61}, {left:130, top:42}, {left:146, top:27}, {left:177, top:13}, {left:189, top:10}, {left:200, top:10}], autoRotate:true}}); // Top Max // Here card is moved to certain position while being rotated back to initial angle before entering circle case 1: TweenMax.to("#card1",0.5,{top:"10px", left:"10px", rotation:0, ease:Power2.easeOut}); takenCards[counter] = identifier; console.log(counter); counter++; break; // Card is being moved again to new location TweenMax.to(document.getElementById(cardToTween), 1,{top:"60px", left:"200px", transformOrigin:"50% 100%", ease:Power2.easeOut}); // Here card(s) is being rotated in new location var tl = new TimelineMax(); tl.to(document.getElementById(firstCardToTween), 0.4,{rotation:"-45deg", ease:Power2.easeOut}) .to(document.getElementById(secondCardToTween), 0.4,{rotation:"-23deg", ease:Power2.easeOut}) .to(document.getElementById(thirdCardToTween), 0.4,{rotation:"5deg", ease:Power2.easeOut}) .to(document.getElementById(fourthCardToTween), 0.4,{rotation:"35deg", ease:Power2.easeOut, onComplete:addEvent});
  12. Hello, I've two Android/iOS Apps with rotation. On 1st App this works no problem on Android 2.3.6: var tl = new TimelineMax(); tl.to(document.getElementById(firstCardToTween), 0.4,{rotation:"-45deg", ease:Power2.easeOut})... However on 2nd App a bezier is being applied first with autorotate set to true and subsequent rotations aren't working (on Android), even when using the same syntax as in 1st App. Any ideas on how to solve this? Thank you, your help will be appreciated.
  13. After good advice from Jack of GSAP staff by providing a way of determining the current angle of an element after being rotated by following a bezier curve in order to do the required math to return it to initial angle (before entering the bezier curve), well it's not necessary. Jack's method works excellent but in this case its not required. Just do this: TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px", rotation:0}, ease:Power2.easeOut}); That's right, rotation 0, and element returns to initial state. I'm applying a top and left animation, to pull the element out of the bezier to a different location. Hope it helps.
  14. Absolutely! It works! The deeper I get into GSAP the more I like it! It's my animation engine by default now. Looking closer, I did try that...I don't know some typo maybe, thing is it works perfectly now. Really appreciate your help, thank you!
  15. Hello, I've an animation of 52 elements over a curve (a circle) using bezier. Elements come from a certain point and join the circle, 26 in one half of the circle, 26 in the other. autoRotate is set to true. Elements are rectangular. All 52 are clickable. After clicking any of the 52 they are moved to a different location. Problem is they preserve the angle of rotation they got following the curve. Question is how get the current angle of rotation in order to do the math and rotate to recover the initial angle (before going into the circle). Found here in the forums a solution but is not working: TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px"}, ease:Power2.easeOut}); var transform = $("#card32")._gsTransform; var x = transform.x; var rotation = transform.rotationX; console.log(rotation); All I get is : Cannot read property 'x' of undefined Your help will be appreciated.