Jump to content
GreenSock

MindGamer

SVG animation | cross-browser positioning differences?

Recommended Posts

I did a quick hourglass spinner using an SVG graphic.

 

It looks great in OSX Chrome and animates just fine.

 

But the positioning seems to be off in Firefox & Safari.  Is there a known issue with SVG positioning cross browser?  Or possibly with transform-origin?

 

Codepen is here:

 

 (View in Chrome first to see the working version).

 

 

See the Pen ZbZmmw by Bangkokian (@Bangkokian) on CodePen

Link to comment
Share on other sites

Hi MindGamer  :)

 

pls check Jack's detailed explanation + solution here :

 

 http://greensock.com/forums/topic/12732-svg-tweenmaxto-animation-distorts-initial-scale-and-transform-values/

 

you can fix your svg issues with this useful online tool too : https://jakearchibald.github.io/svgomg/

 

pls check this out : 

See the Pen EVqqmr by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

To add to Diacos great advice,

 

I notice you are setting transform-origin outside of GSAP. You should really allow GSAP to set your initial or any CSS properties. Especially transforms, this way GSAP can keep track of the CSS properties you are changing outside of it.

 

Since your sand is supposed to be in the center.. then set the transformOrigin to 50% 50% which is the default. Then your sand will animate in the correct position cross browser:

 

Working example:

 

See the Pen OyKKQm?editors=101 by jonathan (@jonathan) on CodePen

 

So for example you are doing this:

theglass.style.transformOrigin = "50% 50%";

Using GSAP you would use the set() method, which will also account for cross browser prefixes for you

TweenMax.set(theglass,{transformOrigin:"50% 50%"});

So all i changed was all your transformOrigin to use 50% 50% using the GSAP set() method. GSAP will add the correct CSS vendor prefix depending on the CSS property.

 

I also noticed that you were not declaring your variables for hgssandspeed and hgflipspeed. As best practice you should always define your variables with var, so you don't have issues with the browser JavaScript parser.

 

And you can use the set() method to define your scale:0 since the set() method is basically a zero based tween

 // so this:
TweenMax.to(sandbottom, 0, {scale:0}); // preset bottom to invisible

// can become this:
TweenMax.set(sandbottom, {scale:0}); // preset bottom to invisible using set()

x

So your final code would look like this:

var hgssandspeed = 2; // define variables with var
var hgflipspeed = .5; // define variables with var

function hgFirstWay() {
    sandtop = document.getElementById("hgsand2");
    //sandtop.style.transformOrigin = "-17% -35%";
    TweenMax.set(sandtop,{transformOrigin:"50% 50%"}); // GSAP set() transformOrigin to center

    sandbottom = document.getElementById("hgsand1");
    //sandbottom.style.transformOrigin = "-17% 20%";
    TweenMax.set(sandbottom,{transformOrigin:"50% 50%"}); // GSAP set() transformOrigin to center
    TweenMax.to(sandbottom,0,{scale:0}); // preset bottom to invisible

    TweenMax.to(sandtop,hgssandspeed,{scale:0, ease:Linear.easeIn});
    TweenMax.to(sandbottom,hgssandspeed,{scale:1, ease:Linear.easeOut, onComplete:hgRotate});
}

function hgRotate() {
    theglass = document.getElementById("hgmain");
    //theglass.style.transformOrigin = "50% 50%";
    TweenMax.set(theglass, {transformOrigin:"50% 50%"}); // GSAP set() transformOrigin to center
    TweenMax.to(theglass,hgflipspeed,{rotation:180,ease:Quad.easeInOut, onComplete:hgSecondWay})
}

function hgSecondWay() {
    sandtop = document.getElementById("hgsand1");
    //sandtop.style.transformOrigin = "-17%  -75%";
    TweenMax.set(sandtop, {transformOrigin:"50% 50%"}); // GSAP set() transformOrigin to center

    sandbottom = document.getElementById("hgsand2");
    //sandbottom.style.transformOrigin = "-17% 70%";
    TweenMax.set(sandbottom, {transformOrigin:"50% 50%"}); // GSAP set() transformOrigin to center

    TweenMax.set(sandbottom, {scale:0}); // preset bottom to invisible use set method

    TweenMax.to(sandtop,hgssandspeed,{scale:0, ease:Linear.easeOut});
    TweenMax.to(sandbottom,hgssandspeed,{scale:1, ease:Linear.easeIn, onComplete:hgRotateAgain});
}

function hgRotateAgain() {
  theglass = document.getElementById("hgmain");
  //theglass.style.transformOrigin = "50% 50%";
  TweenMax.set(theglass, {transformOrigin:"50% 50%"}); // GSAP set() transformOrigin to center
  TweenMax.to(theglass,hgflipspeed,{rotation:0,ease:Quad.easeInOut, onComplete:hgFirstWay})
}

hgFirstWay();

Resources:

GSAP set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

 

:)

  • Like 5
Link to comment
Share on other sites

Ah.. got it. Thanks Diaco & Jonathan for the wisdom!  That was a huge help!

  • Like 1
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.
×