Iamattamai Posted December 9, 2019 Share Posted December 9, 2019 I have some legacy code leaning heavily on matrix transforms. I thought I would upgrade to the latest and smaller version. I tried substituting the core GSAP3 code for my original TimelineMax and none of the matrix transforms work. I then rewrote to the new syntax and still no-go. Is there a plug-in required? Link to comment Share on other sites More sharing options...
GreenSock Posted December 9, 2019 Share Posted December 9, 2019 Are you saying that you wrote external code that requires GSAP to always set transforms with a matrix() or matrix3d()? In GSAP 3, we moved away from matrix stuff so that we could accommodate other units like vw, vh, em, etc. That's impossible with matrices. Do you mind me asking why you must have matrices? If you're having trouble porting legacy code to v3, feel free to post a codepen and we'd be happy to take a peek and lend a hand. It's really not that different. I think once you get used to it, you'll LOVE it. The syntax is more concise, it's more capable, and the library is smaller. 1 Link to comment Share on other sites More sharing options...
Iamattamai Posted December 10, 2019 Author Share Posted December 10, 2019 I'm manipulating SVG body parts using GSAP. They are created and positioned using Inkscape which outputs the SVG using matrices. There are some 20 body parts and currently 20 positions (more slated) - so say 400 matrix transforms in the application right now. Works fine with the old GSAP. I could provide a codepen, but I think conversion is impractical, and losing 50K in file size is the only real obvious upside I see to converting. I think staying with the tried and true is my best strategy for this application. I did manage the convert for another application and I do like the cleaner code and ending the confusion between all the products, max/lite/timeline/etc. As always, thank you for your speedy replies - this forum is amazing. Link to comment Share on other sites More sharing options...
GreenSock Posted December 10, 2019 Share Posted December 10, 2019 I'm still very confused - SVG elements still use matrix() in GSAP 3. And all versions can interpret matrices just fine, so if you're running into any trouble it'd be SUPER helpful to see that. No need to send your whole project - just the simplest possible example (a single <rect> is fine). If there are any bugs or inconsistencies, I definitely want to fix them. I'm not aware of any, though. Link to comment Share on other sites More sharing options...
Iamattamai Posted December 10, 2019 Author Share Posted December 10, 2019 Okay, I continue with codepen challenges so I'm just hosting an example myself here: http://www.eyedea.co/matrixtest.html Note that I have embedded the older version of GSAP and it works fine. If I simply sub that out with GSAP 3, it doesn't work - I understood backwards compatibility to be a given. Nevertheless, I tried updating the code to the following with no success: tl = gsap.timeline(); tl.to("#mlupper",{transform:"matrix(.943, -.332, .332, .943, -30.617, 47.676)", duration: gdur},0) Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 Here's a reduced case CodePen @GreenSock: See the Pen rNaeweq?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 10, 2019 Share Posted December 10, 2019 You can't animate an attribute if it doesn't exist. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 10, 2019 Share Posted December 10, 2019 8 minutes ago, OSUblake said: You can't animate an attribute if it doesn't exist. Good catch. @Iamattamai in case that doesn't make it clear, setting a transform matrix at the start makes it work: See the Pen PowNKWa?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 11, 2019 Share Posted December 11, 2019 In the upcoming release, you should be able to just target the "transform" property (no need to attr:{}). You can preview that here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Better? 2 Link to comment Share on other sites More sharing options...
Iamattamai Posted December 11, 2019 Author Share Posted December 11, 2019 Jack: Sounds better in the promise of backwards compatibility with the previous syntax, but I just tried it with my older working code as-is and no-go. I didn't pursue beyond that. Nevertheless, I think it might be easier to adapt to for those not expecting the addition of an attr: designation. In any case, I got gsap3 working with my matrix transforms and I'm happy thanks to you and Zach and Blake. Thank you all for your help. Have I already mentioned that this forum ROCKS? Link to comment Share on other sites More sharing options...
GreenSock Posted December 12, 2019 Share Posted December 12, 2019 12 hours ago, Iamattamai said: Sounds better in the promise of backwards compatibility with the previous syntax, but I just tried it with my older working code as-is and no-go. I didn't pursue beyond that. For the record, I just tried it in v2 and it doesn't animate there either - it just immediately sets it. I think the new behavior in the upcoming v3 is more intuitive, don't you? Plus it requires less code (skip the attr:{}) 12 hours ago, Iamattamai said: Thank you all for your help. Have I already mentioned that this forum ROCKS? ? 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