deviator206

Hey Thanks. Finally got it working. Would be waiting to use GSAP. While working on flash i had extensively used GS tools. So now when doing similar things in JS, first thought that comes to mind is - GS tool

No problem! thanks for the quick feedback. Can i use rotateY in Greensock tool? Caused i tried using the v-12 but rotateY wasnt in ?

Thanks for pointing out camelCase style. I will always keep that in my mind hence on. I changed it in my code but now i see flickering and z-index issue together. i am just writing down my approach (let me know if anything wrong in my approach ) - create dynamic div elements (cards style with front side and back side) - position it and translate it location from where the animation should be started (say location A (100,100)) - on event of click - start translation from location A to cards origin position (0,0) - on webkitTransitionEnd event, start the flipping of card element.(rotateY(180deg)) code for card creation function CreateCardStructure(sDivName, loc, parentContainer, nFake) { // create parent - var objCardParent = document.createElement('div'); objCardParent.setAttribute('id', 'parent' + sDivName); // add to stage document.getElementById(parentContainer).appendChild(objCardParent); // add required style document.getElementById('parent' + sDivName).className = 'cardContainer'; // create card var objCard = document.createElement('div'); objCard.setAttribute('id', sDivName); //add to parent document.getElementById('parent' + sDivName).appendChild(objCard); //create front nd back with styles to it var sInnerHTML = '<span id="f' + sDivName + '" class="front side">' + '</span>' + '<span id="b' + sDivName + '" class="back side">' + '</span>'; //add images to front nd back var imgFrnt = new Image() imgFrnt.src = loc.front imgFrnt.setAttribute('id', 'imgFrnt' + sDivName); var imgBck = new Image() imgBck.src = loc.back imgBck.setAttribute('id', 'imgBck' + sDivName); //add it to card var element = document.getElementById(sDivName). element .innerHTML = sInnerHTML; document.getElementById('f' + sDivName).appendChild(imgFrnt); document.getElementById('b' + sDivName).appendChild(imgBck); element.style.marginLeft = loc.x element.style.marginTop = loc.y element.style.position = 'absolute' element.style.zIndex = nCurrentCard element.style.transformOrigin = '123px 0px' element.style.webkitTransformStyle = 'preserve-3d' element.style.webkitBackfaceVisibility = 'hidden' element.style.webkitTransform = ' translate(' + (objDealPosition['xPos'] - (nPadding * nCurrentCard)) + 'px, ' + objDealPosition['yPos'] + 'px)' } translating the card on event to origin element.style.zIndex = nCurrentCard element.style.transformOrigin = '123px 0px' element.style.webkitTransformStyle = 'preserve-3d' element.style.webkitBackfaceVisibility = 'hidden' element.style.webkitTransitionDuration = '1s' element.style.webkitTransform = 'translate(0px, 0px)' on end of 'webkitTransitionEnd' event element.style.visibility = 'visible' element.style.position = 'absolute'; element.style.zIndex = nCurrentCard element.style.transformOrigin = '128px 20px'; element.style.webkitTransformStyle = 'preserve-3d' element.style.webkitTransitionDuration = '0.5s'; element.style.webkitBackfaceVisibility = 'hidden' element.style.webkitTransform = 'rotateY(180deg)' I am in fire-fighting mode for this project and this flipping module is just killing me!! It would love to hear back from you on this.

css3 - feature I tried downloading and using the v-12. But i guess the support for css3 - rotateY is yet to be plugged in. I want to implement a looped sequence of animation - first translate the element then apply rotateY on it When i run my demo, its working well on other browsers BUT iOS mobile- safari, i notice the Z-order (misbehaving for dynamically created elements whom the webkitTransform is applied) and flickering issue. I tried adding the zIndex and backface-visibility- flickering is gone. But even if i set the z-Index still the elements are not displayed in proper stacking order. This happens only after i add the rotateY code document.getElementById(sDivName).style['z-index'] = nCurrentIndx document.getElementById(sDivName).style['-webkit-backface-visibility'] = 'hidden' document.getElementById(sName).style['-webkit-transform'] = 'translate(-50px, 0px) rotateX(0.4rad) rotateY(3.14rad)' It would be great, if you could guide me with this.

Hi carl schooff, Thanks a lot you are absolutely right - " jerk because it slows down and then speeds up again" Now the effect looks exactly the way as expected. And Yes Bounding function is there for the purpose related to game Thanks a lot . This POC paved way for my game development ahead!

Hi , i want to create cyclic animation as you can for any slot based games. I m used Tweenlite and TimelineMax but reel of Slot machine is repeating its animation with a jerk in it Can anyone suggest me how to proceed TimelineMax var timeline:TimelineMax = new TimelineMax({repeat:nRepeatCount }); timeline.append( TweenLite.from(mc,1, {y:Expected_Position,onComplete:Bounding}) ); function Bounding():void { //i reset the Y to original position }