dejv Posted September 1, 2020 Share Posted September 1, 2020 Hi, im trying to wrap my head around gsap 3 and pixi. Im scaling and rotating some sprites so I need some way to set the origin of the transforms. I cant find any mention of transformOrigin in the gsap 3 documentation and when im trying to implement it I am getting "gsap.min.js:10 Invalid property transformOrigin set to 50% 50% Missing plugin? gsap.registerPlugin()" I cant find any plugin for transformorigin. Is this something to do with me, Pixi or did transformorigin go missing from gsap 3? Very confused here. Thanks Link to comment Share on other sites More sharing options...
mikel Posted September 1, 2020 Share Posted September 1, 2020 Hey @dejv, Welcome to the GreenSock Forum. Have you seen the CSS plugin? Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
dejv Posted September 1, 2020 Author Share Posted September 1, 2020 Hi! Does the CSS plugin work for Pixi and canvas objects as well? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 1, 2020 Share Posted September 1, 2020 3 hours ago, dejv said: I am getting "gsap.min.js:10 Invalid property transformOrigin set to 50% 50% Missing plugin? gsap.registerPlugin()" That means that your target is not a DOM object and transformOrigin can't apply (because it doesn't exist). I believe that Pixi has a pivot that you can set instead, though it's not strictly the same thing as a transform origin. @OSUblake works with Pixi more and might can provide additional insight. Alternatively you could place the item in a container, translate it negatively by half of its width and height, and then rotate the container instead. 1 Link to comment Share on other sites More sharing options...
PointC Posted September 1, 2020 Share Posted September 1, 2020 Sounds like you're looking for anchor. Using the gsap pixi plugin you'd set it like this. gsap.set(yourSprite, {pixi: { anchor: 0.5 } }); Happy tweening. 3 Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2020 Share Posted September 1, 2020 Anchor only works for sprites. For other stuff like graphics or containers, you need to use pivot. 2 Link to comment Share on other sites More sharing options...
PointC Posted September 1, 2020 Share Posted September 1, 2020 I think the OP was only talking about sprites. PS Where have you been? I thought "pixi" or "canvas" immediately summoned you to a thread. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted September 1, 2020 Share Posted September 1, 2020 8 minutes ago, PointC said: PS Where have you been? I thought "pixi" or "canvas" immediately summoned you to a thread. Nah. It has to be an interesting question. Link to comment Share on other sites More sharing options...
dejv Posted September 2, 2020 Author Share Posted September 2, 2020 Pivot it is. I was just hoping that gsap could handle it with percentages or similar. Thanks 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