Firefox Bug rotationY Crazy animation or not working

[scubajosh 3 Likes (Newbie)]

So I have a bug with pure CSS 3 animations  as well as green sock animations doing the same thing. So the issue I have is when I do a rotateY on a plane the video player on the backside is backwards I have resolved the issue in chrome bye doing scale(-1, 1); for the css 3 transition for tweenlight it doesnt even affect the rotation of the element and its still backwards. If I do scale(-1, 1); in firefox it goes crazy and does a diaginal flip. Does anyone know how to flip a element in greensock and preserve the elements perspective "not backwards when fliped 180" while having it be compatible in the latest browsers?

 

.front {
     -moz-transform: rotateY(0deg);

}

.back{
     -moz-transform: rotateY(180deg) scale(-1, 1);

}

 

 

if($('#videoBg').hasClass('back')){

     TweenLite.to($("#videoBg")[0], 0.8, { rotationY: 180, scaleX:-1, scaleY:1});
            }else{

     TweenLite.to($("#videoBg")[0], 0.8,  { rotationY: 0});
}

[Carl 9,066 Likes (Superhero)]

it sounds like you need to do something like this:

http://codepen.io/GreenSock/pen/CocFs

 

I don't think you need to add scale to the equation, but maybe I'm missing something.

 

If you need more help, please fork that codepen demo to illustrate the issue you have.

[scubajosh 3 Likes (Newbie)]

That example doesnt work but I modifed it a little bit to replicate the issue... I have temp hack to fix using scale on a onComplete but you see a jump.

 

See the Pen jzFqo by seraphzz (@seraphzz) on CodePen

 

 

I should be able to put scale in as a property to tween to. Like this example shows.

See the Pen KwmCr by seraphzz (@seraphzz) on CodePen

 

 

-moz-transform: rotateY(180deg) scale(-1, 1); works in crome...

[scubajosh 3 Likes (Newbie)]

This example shows the firefox bug I am talking about and works in chrome.

 

See the Pen vzHBl by seraphzz (@seraphzz) on CodePen

[Carl 9,066 Likes (Superhero)]

sorry about my link not working, I saved a version while messing around. its fixed now.

I'll look at the ones you posted shortly.

[Carl 9,066 Likes (Superhero)]

This CSS animation works the same in Chrome and FireFox:

http://codepen.io/seraphzz/pen/LzghH

 

The order in which css transforms is applied can really mess things up some times.

You'll see that I'm declaring the scale before the rotateX in both .back and .front

 

---

 

I'm not sure if that pen was only to illustrate the bug or if it was the effect you are after. 

Are you saying that you want to flip something 180 degrees and have it appear the exact same way it did before it was flipped?

 

If so, does this work for you?

http://codepen.io/GreenSock/pen/awHBF

 

 

 

-c

[scubajosh 3 Likes (Newbie)]

You nailed it thanks for your help with this. The solution was to make another container seperate from the animated one and do a scale -1 on it while it is halfway through animation and BAM!

 

 

            TweenLite.set($("#videoBg")[0], {transformPerspective:-1000+"px"});

            var tl = new TimelineMax({});

            self.flipRotation -= 180;
            var rotationPosObj = {
                half: self.flipRotation+90,
                full: self.flipRotation
            };

            tl.to($("#videoBg")[0], 0.4, {rotationY: rotationPosObj.half, ease:Linear.easeNone})
            .set($("#vidContentContainer")[0], {scaleX:(self.rotateCounter %2 === 0)? -1 : 1})
            .to($("#videoBg")[0], 0.4, {rotationY: rotationPosObj.full, ease:Linear.easeNone, onComplete: function(){
                app.router.videoPlayer.$vid_obj.play();
            }});
            
            self.rotateCounter++;

 

 

    <div id="videoBg" class="sprite-main_images-videoBg">
        <div id="vidContentContainer">
            <div id="videoContainer"></div>
            <div class="sprite-main_images-shareTxt"></div>
            <div id="socialButtons"></div>
        </div>
    </div>

[Carl 9,066 Likes (Superhero)]

Cool. Glad I could help.