Share Posted November 8, 2022 I'm trying to create a folding animation with svg elements. But unfortunately rotationY (or other 3d methods) does not seem to work. Any suggestions? See the Pen YzaBGae by lollibomb (@lollibomb) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 8, 2022 Hi, Transforms in SVG are always in 2D so in order to have a 3D effect in SVG you'll have to resort to a mix of shape animations and perhaps playing with some shadows or gradient colors (I would go with gradients, since filters in SVG don't perform very well). SVG is not my strongest suit and my experience with it is limited, but I would try using the MorphSVG Plugin and animating gradients at the same time. I know that @Cassie, @PointC and @mvaneijgen know their way around SVG pretty well, so hopefully they can chime in and share some of their wisdom on the subject. Sorry I can't be of more assistance but my general SVG knowledge is a limitation. Happy Tweening! Link to comment Share on other sites More sharing options...
Share Posted November 9, 2022 I had no idea you couldn't use 3D transforms inside SVGs! I would be something like this or like what @Rodrigo said morph between shapes. Hope it helps and happy tweening! See the Pen mdKRwXg by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now