Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Zaperela

Help with transformOrigin

Recommended Posts

Good morning all,

 

I'm having a bit of an issue with an animation I'm working on. I am trying to open truck doors on hover.

 

I came up with some weird way of pulling it off (see code pen), but it only works in FireFox. Chrome and Safari it shrinks the doors but still animates them. I have a feeling it's me not fully understanding transformOrigin but I am not sure on that.

 

I've spent about a week reading the forums and trying different things. Time for a fresh set of eyes. 

 

Thank you in advance!

- Zap

See the Pen oQZdaz?editors=0100 by Zaperela (@Zaperela) on CodePen

Link to post
Share on other sites

I tried to make something similar of a compartment door on a pick up truck and also tried using transformOrigin. I had a lot of problems getting it to work so I resorted to a sprite sheet. I was using PNG images instead of SVG, but the concept should work in your case too.

 

Not sure if you used a sprite sheet before, but it's just a series of frames that you can make in Photoshop. You should be able to make one in Illustrator too. Frame 1 is the closed door and the last frame is the opened door. You'll have to figure out the in between frames. You then tween your door element with a steppedEase.config(x). Replace x with the total number of frames in your spite sheet.

 

A spritesheet should work in every browser since you're not doing any transforms to the image.

  • Like 1
Link to post
Share on other sites

SVG doesn't officially support 3D. I'm not so sure your trick of putting a div inside a foreign object inside an SVG is a valid workaround.

I think it would be better if you made a reduced test case with just a simple div in an SVG and tried to get it to render the way you want just with CSS (static, no animation). If it is technically possible to achieve, then I would suggest trying to animate it with GSAP.

 

SVG code is a disaster to try to read (not your fault), so it always helps to reduce it as much as possible... for instance there is no need for the carts or even the truck at this point.  I would start with a simple rectangle or 2 and work up from there.

 

There are some folks around here who know more about SVG than I do, so perhaps there will be some helpful info for you.

 

 

 

 

  • Like 5
Link to post
Share on other sites

Yeah, @Carl is exactly right, 3D with SVG is not fully supported and is a bit tricky. My advice would be to put each door in its own SVG and rotate the whole thing. It's a little more work, but it'll still scale nicely and should work correctly in all browsers. 

 

Happy tweening.

:)

 

  • Like 4
Link to post
Share on other sites

Hi @explorerzip,

 

I had time for a door ...10

However, the driver has to stay at the door, otherwise it will be closed again ?.

 

See the Pen qQrLVE by mikeK (@mikeK) on CodePen

 

Happy tweening ...
Mikel

 

 

  • Like 7
Link to post
Share on other sites

Great work, Mikel. Nice and simple. just the way I like it!

  • Like 2
Link to post
Share on other sites

Nice work @mikel

 

You just need the GSAP guy (does he have an actual name?) to hold open the truck door with his tweening powers :D Future Marvel movie right there LOL

  • Like 1
  • Haha 3
Link to post
Share on other sites

Hi @Zaperela and welcome to the GreenSock Forum!

 

Here are some helpful resources on CSS transform-origin:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

https://tympanus.net/codrops/css_reference/transform-origin/

https://teamtreehouse.com/library/changing-the-transform-position-with-transformorigin


Even though SVG does not support 3D transforms at this time. That wont stop you like @PointC advised from separating your SVG into separate parts. Then you can wrap each SVG in a <div> tags and animate the <div> tags using 3D transforms.

 

And here is just a simple example of swinging a door open and then closing it, so you can see the structure and use of transform-origin.

 

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

 

But there are many ways to achieve what you want. Best of luck to you!

 

Happy Tweening :)

 

 

  • Like 7
Link to post
Share on other sites

@Jonathan thank you for this great example!

 

I can't get over how helpful and friendly this community is! It is truly outstanding! ❤️

  • Like 4
Link to post
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.

×