Skip to content
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

Closed
dsosborn opened this issue Dec 8, 2023 · 2 comments
Closed

v3.12.3 breaks positioning of scaled elements within inline svg #563

dsosborn opened this issue Dec 8, 2023 · 2 comments

Comments

@dsosborn
Copy link

dsosborn commented Dec 8, 2023

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

@jackdoyle
Copy link
Member

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
@jackdoyle
Copy link
Member

Fixed in 3.12.4. ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants