[Animation not playing on mobile safari refresh]

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

[Animation not playing on mobile safari refresh]

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 ?

[Animation not playing on mobile safari refresh]

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.

[Animation not playing on mobile safari refresh]

css3 - feature

For Safari (only), when you make some sort of transform change (like rotation, x, y, scale, or skew), it will ensure that -webkit-backface-visibility and z-index are set.

 

Please download the latest version and give it a shot.

 

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.

[TweenLite or TimelineMax]

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!

[TweenLite or TimelineMax]

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

}