Jump to content
GreenSock

dada78

3d rotation with perspective

Go to solution Solved by Jonathan,

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

Hi Carl,

we really enjoyed your presentation the other day! I found the above referenced codepen and it's exactly what I need for a banner I am working on, only that I am not quite sure how to initiate the animation of the flip to happen automatically on load or how I would be able to control it using the timeline method to initiate it at a certain time. I just don't need it on hover.

Thanks in advance!

 

 

See the Pen yzahJ by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi dada78  :)

 

pls try something like this :

 

TweenLite.set(".cardWrapper", {perspective:800});
TweenLite.set(".card", {transformStyle:"preserve-3d"});
TweenLite.set(".back", {rotationY:-180});
TweenLite.set([".back", ".front"], {backfaceVisibility:"hidden"});

var tl = new TimelineMax({paused:true});

tl.staggerFrom($(".card"),0.7,{opacity:0,scale:0.1,ease:Back.easeOut}, 0.2)
.to($(".card")[0],1,{rotationY:-180,repeat:1,yoyo:true,repeatDelay:5})
.to($(".card")[0],0.5,{opacity:0.5})
.to($(".card")[1],1,{rotationY:-180,repeat:1,yoyo:true,repeatDelay:5})
.to($(".card")[1],0.5,{opacity:0.5})
.to($(".card")[2],1,{x:210,ease:Back.easeOut})
.to($(".card")[2],1,{rotationY:-180,repeat:1,yoyo:true,repeatDelay:5})
.to($(".card")[2],0.5,{opacity:0.5})

TweenMax.delayedCall(2,function(){ alert("Start"); tl.play()})
  • Like 3
Link to comment
Share on other sites

Diaco and Carl, thanks so much, that's exacyly what I needed and it can't any more straight forward. I do have a dumb question: I am new to codepen and I don't see the reference link to the Greensock library anywhere on that codepen you referenced. I would assume it needs to be included, no?  What am I missing here? Thanks!

Link to comment
Share on other sites

Hi Carl,

do you also have a codepen of the banner example you showcased at the presentation? Thanks!

Link to comment
Share on other sites

Hi guys,

I have been struggeling in animating the 360 rotation on a card:

See the Pen 22261192ec643eabc52ffa0c2fa08b61 by dada78 (@dada78) on CodePen

 

My 3 issues are as follows,

 

1_When the -180 y rotation happens the card dips down (y) and I have no idea why that is. It should just smoothly animate at the same spot.

2_When the animation finishes I would like to apply a skewed perspective to the card, but when I add a perspective value it won't work.

3_ When viewed on Firefox 36(and probably below)/Mac, the image looks pixelated. I tried to apply image-rendering: auto, but it's not doing anything..Any other suggestions to smooth out the image art?

 

Please advise.

Thanks!

Link to comment
Share on other sites

Howdy.

 

The card isn't dipping down, the back cardface is just beneath the front, giving that illusion.

Check out this version that removes the backface-visibility so that you can see both back and front all the time:

http://codepen.io/GreenSock/pen/16762250ca5da785c56e10a261f1be56

 

aha!  :mrgreen:

 

I very quickly modified some css (mostly giving the cardface position:absolute and setting width and heigh on card) I think this is closer to what you are going for:

 

http://codepen.io/GreenSock/pen/2554d3a65e15b2146767e9b0358af7d3

 

It appears the skewX:-10 is working, but I don't know if I understand what you mean by "skewed perspective". Might help to see a static image of what you have designed.

 

Unfortunately FireFox is notorious for poor anti-aliasing of 3D elements. I'm not really sure of a fix for that, however one of our community members might have some ideas.

 

Let us know if you need any more help. Glad to see you sticking with it!

 

Carl

  • Like 3
Link to comment
Share on other sites

Hi Carl,

Thanks for the quick response! Ah ok, the back and front always confuses me :-) when animating...

 

I meant more of a perspective skew (I just added the skewX to play around). Basically the card should be skewed in perspective. Meaning the right edge shold look larger in height than the backend edge if that makes sense? Like having perspective:400 or something applied to the card when settled, but that doesn't work..

 

I can counteract the anti-aliasing issue by just cutting the content of the card art and have the container be css.

 

Thanks!

Link to comment
Share on other sites

  • Solution

Hello dada78,

 

This is happening because your back and front card faces (.cardFace) are not absolutly positioned inside the .card div. So they display in the document flow, one after another, instead of stacked on top of each other outside the flow of the document.

 

Is this what you are after? ... working example:

 

See the Pen 8ff0cd82b22d6ff17420c941fff97901 by jonathan (@jonathan) on CodePen

 

Regarding your question #1 from above:
 

When the -180 y rotation happens the card dips down (y) and I have no idea why that is. It should just smoothly animate at the same spot.
 

You will need to do a couple of things to fix this.

  • Add a specific width and height to your .card class.
  • Add position:relative to your .card class
  • Add position:absolute to you .cardFace divs so they stack on top of each other

Basically what you can do, as a rule of thumb..  any time you have absolutely positioned elements, you should always have a HTML tag above it that has the CSS property position:relative. So this way your absolute positioned elements are positioned relative to its parent.

 

Once you first setup your HTML markup, then all the CSS for your elements making sure they are all layed out in the right place. Then your elements will be much eaiser to animate.

 

As far as image pixelation iin Firefox .. i could not see an image in your codepen example to see the pixelation.

 

I hope this helps! :)

  • Like 2
Link to comment
Share on other sites

Thanks Carl and Jonathan!

 

And in order to deal with the image pixelation I found it easier to place the content centered as a background image and have the div set to a background color with rounded corners to avoid the pixelation at least along the edges. As far as the content pixelation goes I am still looking for work arounds..(other than swapping the scaled down image out with an image at 100%).

Link to comment
Share on other sites

Regarding question #3

 

If you were only seeing pixilation or jaggy edges in Firefox while transforming elements?

 

You can solve that by adding a transparent border and/or outline CSS properties on the transformed element with jaggy edges in Firefox.

 

Check this example,

See the Pen smvwb by jonathan (@jonathan) on CodePen

:

See the Pen smvwb by jonathan (@jonathan) on CodePen

:

/* Fix jaggy edges on transformed elements in Firefox */
.elementWithTransformsThatHaveJaggyEdges {  
    outline: 1px solid transparent;
    border: 1px solid transparent;
}

:

:)

  • Like 1
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.
×