Jump to content
Search Community

3D Transforms Not Working

wildspidee test
Moderator Tag

Recommended Posts

I need to animate a door opening. I've found several examples using different CSS techniques. Here is a great reference:

See the Pen EgZdaQ by am_eu (@am_eu) on CodePen

 

My SVG is very extensive, but I've copied out just the door set into CodePen. I tried to make the entire set work (#doorSetClosed) and that didn't happen. Then I changed over to just the door (#doorClosed) to limit possible issues. That doesn't work either.

 

I don't know if the values for transformPerspective or rotationY are correct. I just threw something in for testing. It doesn't do anything at all.

 

I am referencing this page: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin which states that the CSSPlugin is included and activated.

 

(Also, as a side note, this page references this page https://greensock.com/css3/  that doesn't work at all. It is throwing an error and won't run. Maybe someone could fix that, too? It would be helpful.)

 

Any suggestions would be greatly appreciated. Thank you.

See the Pen ZEWqeNm by wildspidee (@wildspidee) on CodePen

Link to comment
Share on other sites

Hey wildspidee and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

The main issue here is that SVGs do not support 3D. That means that things like rotateY, perspective, etc. simply will not work on SVG elements. In some cases you can work around this using alternative properties or layered SVGs and animating the SVG element itself instead of elements inside of the SVG. More on that here:

 

Alternatively you could use CSS to make this shape or use <img>s instead.

 

16 hours ago, wildspidee said:

this page references this page https://greensock.com/css3/  that doesn't work at all. It is throwing an error and won't run. Maybe someone could fix that, too? It would be helpful.

Wow, an article from 2012! It's quite a relic :) Somehow it must have been overlooked when we were updating things to GSAP 3. That article isn't particularly useful for now so I think we will end up hiding it and removing the link to it. Thanks for pointing it out!

Link to comment
Share on other sites

Ahh, I should have thought about SVG being the culprit. I just blamed GSAP, because I am least familiar with it. This door is just a teeny part of a very large SVG component. I can't really isolate it or go with an image at this point.

 

I did create three door images; closed, mid, open. I was originally going to tween those with GSAP, but I was having issues getting my head around how I would do it. I'll have to give that a go.

 

Thank you for your help and suggestions.

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.
×
×
  • Create New...