Jump to content

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

SVG <image> center problem using transformOrigin: "50% 50%",

Recommended Posts

I am new to Greensock and have read that GSAP is the best solution for animating my SVG elements. I am trying to use GSAP to animate a PIN on a  SVG game map/board.


My site is a HTML5 PWA Bingo Game App and uses SVG Images for the Game Map. On the Game MAP are PINs that indicate the levels the user has achieved and is able to play at.


Each PIN is an SVG <image> element. Each of the larger SVG map sections contain references to these PINs (which are common) by using <use tag to reduce asset size.


I want to use Greensock highlight the users current level PIN by toggling is scale.


I used the following:

TweenMax.to($level_element, 0.7, { scaleX: 1.3, scaleY: 1.3, transformOrigin: "50% 50%",  yoyo: true, repeat: -1 });


After reading your forum posts I also tried:

TweenMax.to($level_element, 0.7, { scaleX: 1.3, scaleY: 1.3, transformOrigin: "50% 50%", force3D: false, immediateRender: false, yoyo: true, repeat: -1 });


Both the above appeared work initially, however it is inconsistent on Chrome and Firefox browsers and in particular Safari, where the center  is sometimes way off position.

The problem appears to be related how the browser or Greensock calculates the center of my svg <image> using transformOrigin: "50% 50%"


What happens after a browser reload is the center point defaults the top left corner my SVG <image> instead of its center, which causes an undesirable offset-stretch effect instead of shrink/expand toggle effect.  I have no css animations on the PIN or other svg elements.


Once I have resolved this issue, I would like to add many other animations, for example: I would like to animate the clouds so they appear from the left and float across the map and off the screen to reappear again on the left. However, I am concerned that something is messing with the animations positionings. 

These svg PIN images use xlink:href="data:img/png;base64 so they are huge strings that likely won't work in an CodePen example.

We just did a soft launch of the game site, so if needed you can see the PINs live at www.bingotreasure.com 

I have had to revert to a simple opacity toggle on my Pins in the meantime using:

                TweenMax.to($level_element, 0.5, { opacity: 0.75, force3D: false, immediateRender: false, yoyo: true, repeat: -1 });


Any suggestions on how to resolve this centering problem using transformOrigin: "50% 50%"?


Many thanks.

  • Like 1
Link to comment
Share on other sites

Welcome to the forums, @arfdev. It's tough to troubleshoot blind, but it sounds to me like maybe the assets aren't fully loaded when GSAP starts trying to animate them. That would certainly explain why it seems to default to the origin being in the very top left corner. In order to figure out what transformOrigin:"50% 50%" actually is, it needs to getBBox() on the SVG element...and that won't report accurate sizes if the asset isn't even loaded yet. The width and height would be 0 at that point. See what I mean? 


I'd also recommend being careful about animating <use> elements, as certain browsers treat them oddly. I'm not saying you can't - GSAP will do whatever it can to work around browser issues, but sometimes it's simply impossible, so I'd recommend doing a lot of testing. 

If you're still having trouble, please post a reduced test case (it doesn't need to be your actual project - in fact, it's better if it's just a simplified version) in codepen or jsfiddle or something like that, and we'd be happy to take a peek. 


Have a great weekend. 

  • Like 2
Link to comment
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.