-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v3.12.3 breaks positioning of scaled elements within inline svg #563
Comments
Sorry about that regression, @dsosborn. Thanks for pointing it out. It should be fixed in the upcoming patch which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js |
jackdoyle
added a commit
that referenced
this issue
Dec 14, 2023
- FIXED: regression in 3.12.3 could cause ScrollTriggers in gsap.matchMedia() to stop functioning after quick resizes that pass the matchMedia bounds. See https://gsap.com/community/forums/topic/39241-animations-freeze-after-a-few-window-resizes-and-using-gsapmatchmedia/ - FIXED: overwriting a scrollTo tween in such a way that didn't leave any more properties tweening, onInterrupt() wasn't invoked. - FIXED: SplitText TypeScript definitions file needed an "elements" property. See #564 - FIXED: if you Promise.all() or .then() a timeline that already finished and has a zero duration, that Promise may not resolve properly. See https://gsap.com/community/forums/topic/39291-promiseall-dont-resolve-when-overwrite/ - FIXED: regression in 3.12.3 could cause transforms (x, y, scaleX, scaleY, rotation, etc.) on SVG elements to calculate the origin incorrectly. See https://gsap.com/community/forums/topic/39197-update-3123-broke-my-code-for-animating-clip-paths and #563
Fixed in 3.12.4. ✅ |
This was referenced Sep 13, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have an inline svg that contains several elements that are positioned with GSAP. Upgrading to gsap v.3.12.3 displaced many of these elements.
Reverting to 3.12.2 fixed the problem.
Investigating further, it seems the problematic elements were ones that were scaled with no transformOrigin specified. Adding
transformOrigin: "0% 0%"
to all these elements seems to fix the issue. Without that, it seems like gsap is calculating the origin from the top left corner of the svg, whereas I believe it used to be the top left corner of the element.To illustrate this, I made 2 codepens with the same code, different gsap versions
v3.12.2: https://codepen.io/DouggieO/pen/zYebqep
v3.12.3: https://codepen.io/DouggieO/pen/GRzeZYa
The text was updated successfully, but these errors were encountered: