Jump to content
Search Community

Couldn't tween backgroundSize in Firefox

Natthawut test
Moderator Tag

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,

 

I was implementing a tween based on CSS3's background-size today. That would map to "backgroundSize" as defined in CSSPlugin.js.

 

However, the tween doesn't work in the latest Firefox. While it works perfectly in the latest Chrome.

 

I digged down until I found about this condition in _parsePosition function in CSSPlugin.js:

 


   	 _parsePosition = function(v, o) {
			if (v == null || v === "" || v === "auto") {
				v = "0 0";
			}

 

 

Debugging this, I found that 'v' was passed in as 'auto' in Chrome. But it was passed in as 'auto auto' instead in Firefox. Since 'v' was not changed to '0 0' this leads to parsing problem resulting in 'NaN' in o.ox. And thus the effect doesn't work.

 

My TweenMax code looks like something along these lines:

 

		controller.addTween(
				chart.offset().top,
				TweenMax.fromTo($('.bub', chart),
						.25,
						{css:{opacity:0, 'letter-spacing':'30px', backgroundSize:'0% 0%'}, immediateRender:true, ease:Quad.easeInOut},
						{css:{opacity:1, 'letter-spacing':'0px', backgroundSize:'100% 100%'}, ease:Quad.easeInOut}
				),
				0, -350
		);

 

I patched CSSPlugin.js locally so that it now handles 'auto auto' case. The backgroundSize transition now works correctly on my machine.

 

if (v == null || v === "" || v === "auto" || v === 'auto auto') {
 v = "0 0";
}

 

Hope this helps. Not sure of any proper channel to report issue for TweenMax?

 

Natthawut

Link to comment
Share on other sites

  • 4 weeks later...

Yes, the "auto auto" fix has been applied to CSSPlugin for several versions now (sorry I didn't update this thread to specifically mention that). As far as it working without CSSPlugin, I'd recommend being very cautious about that - some browsers may support setting element.backgroundSize directly but I think the standard way is element.style.backgroundSize (notice the "style" which is what CSSPlugin is built to handle).

 

Could you provide a very simple example HTML page that demonstrates the way you're doing things?

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...