Jump to content
Search Community

Chrome Bug with transformOrigin: "50% 50%"?

elegantseagulls test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all, 

 

I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera).

 

Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera.

 

This Pen has been fixed to show solution.

 

See the Pen qbWzgK by ryan_labar (@ryan_labar) on CodePen

See the Pen vNozXO by ryan_labar (@ryan_labar) on CodePen

Link to comment
Share on other sites

  • Solution

Hello elegantseagulls, and Welcome to the GreenSock Forum

 

This is not a chrome bug with transform-origin. This is happening because you are using CSS transitions along with GSAP. And also because the way the HTML markup and CSS is for the <label> tags and the SVG inside it.

 

See this working example in Chrome

 

See the Pen gPYVyg by jonathan (@jonathan) on CodePen

 

I suggest you don't mix CSS transitions or CSS animations with GSAP when animating elements.

 

You need to remove the CSS transition property for your .correct  and .wrong class

.wrong{
  fill:$wrong;
  /*transition: stroke .5s 1s;*/ /* remove this property and apply the fill with GSAP instead */
}
.correct{
  fill:$correct;
  /*transition: fill .5s;*/ /* remove this property and apply the fill with GSAP instead */
}

x

Also you should add the following CSS so your markup of labels are in order for stacking on top of each other using CSS instead of <br> tags.

x

label {
  position:relative;
  line-height: 40px;
  clear: both;
  display: block;
}

I also removed your <br> tags in between each label tag since the CSS above with clear:both and display:block will do a better job than using break row tags. break row tags are calculated differently as far as their line-height. And anytime you use position absolute you should have a parent with position:relative.

 

Also i had to make it so you didn't use GSAP CSSPlugin classname property, since you were using it to switch a class that was triggering a CSS transition. The purpose of the GSAP classname property is to animate the CSS styles directly on that class name. But it should not be used with CSS rules that have CSS transitions or CSS animations. Or there will be a conflict of buggy behavior, like you were seeing in Chrome.

 

So i made your correct() function like this, so it changes the CSS fill property directly, instead of using your mix of CSS transitions and GSAP:

function correct(){
  var tl = new TimelineMax();
  tl
    .add('right')
    .set(".marked", {transformOrigin: "50% 50%"})
    .to(".marked", .88, {scale:".8", ease:Elastic.easeIn.config(2, 0.7)}, 'right')
    .to(".marked", .5, {scale:"1", ease:Elastic.easeOut.config(2, 0.7)})
    //.to('.marked', .27, {className:'+=correct', delay:.88}, 'right') 
    .to('.marked', .27, {fill:'#006400', delay:.88}, 'right') /* just change the fill directly with GSAP */
  return tl;
}

Usually these type of cross browser display issues happen due to the way the initial CSS and HTML are setup. And most importantly when you try to mix GSAP with CSS transitions or CSS animations, both fighting to animate an element. Once you have your elements correctly positioned then your animations will look the same cross browser, especially with CSS transforms.

 

Link to CSSPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

:)

  • Like 4
Link to comment
Share on other sites

Thank you so much for the detailed response, @Jonathan! It's answers like this that makes me love GSAP! 

 

Thanks for the info on the CSSPlugin. I was hoping to leverage the variables for colors in SCSS, but I might just have to hardcode those into the JS...

 

Also, you'll be happy to know I wasn't planning on keeping the <br/> elements.  

  • 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.
×
×
  • Create New...