Jump to content
GreenSock

scubajosh

Firefox Bug rotationY Crazy animation or not working

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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});
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Cool. Glad I could help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×