[Scaling parent and child element]

Hi everyone

 

I would like to share a issue I have with scaling two nested elements at the same time and was wondering if maybe someone would have a solution to my issue.

 

To the task: 

As you can see from the code example I have two elements. A mask and a inner_wrapper. Initially I scale the mask up by the factor 2 (zoom) to make sure the inner_wrapper stays the same width and height I scale the inner_wrapper down by 2. So far so good  Now I would like to tween the two elements (mask & inner wrapper) to there original scale 1. Both elements don't scale in sync and I can see a that the inner_wrapper first gets slightly bigger before it scales down.

 

https://goo.gl/2odpzd

 

Hope someone might know how to tackle that issue!

 

Thanks for your help!  

[Firefox background image jumps after scale]

https://bugzilla.mozilla.org/show_bug.cgi?id=1277598

Thanks mcarlson for submitting the bug!

[Firefox background image jumps after scale]

Hello hanslibuzli,

 

This is not a GSAP issue or bug.. but due to CSS properties that are missing.

 

If your seeing a screen jump make sure you are using css position:absolute on your .band child that your animating. Since right now your animating .band which has a css position: static, which is the default and will cause that jump due to animating in the document flow.

 

A rule of thumb to follow is always either add position: absolute or relative. With position absolute being better since it is outside of the document flow.

 

Since position relative is still inside the document flow. And position:absolute brings the element outside the flow if the document, so it doesn't affect the elements around it causing your jump.

 

Also add css overflow: hidden to your body tag so when your element scales passed the viewport, your scrollbars will appear causing the whole page to jump due to the addition of the scrollbars. If you dont add overflow hidden then give your .wrapper container a height.

Hi Jonathan

 

Thanks you for taking your time to investigate into this strange issue. 

 

I've tried all your suggestions and forked the original CodePen project (

See the Pen oxEZXz by anon (@anon) on CodePen

) but unfortunately I still have a massive jump?! I start to believe its a FF bug on mac..

[Firefox background image jumps after scale]

'Jump' sounds pretty heavy but it's only like one pixel. And since it zooms pretty hard to see. I can imagine it is annoying though when you notice it. It just shifts a pixel or so. Thought it might be caused by rounding number or so but didn't found a working cure.

Unfortunately it's more then 1px on my siede, in fact almost a half of the screen jump 

[Firefox background image jumps after scale]

I am on Windows 7 and Windows 10 using Firefox 40.* and I do not see that jump towards the end.

 

I believe this has to do with the image not being fully loaded before the animation runs. It is always best practice when animating images. To run your animation only after the image is loaded.

 

So you since you are already using jQuery in your code example, you can do something like this:

// only run when DOM is ready
$(document).ready(function() {

   // only run after all images, links, and css has loaded
   $(window).on("load", function(){

         // Use GSAP to set your CSS properties instead of jQuery css() method
         TweenMax.set(".band",{
              width: $(window).width(),
              height: $(window).height()
         })
               
         TweenMax.set(".band", {
            scale : 1
         });

         TweenMax.to(".band", 1, {
            scale : 1.5 
            rotation: 0.01 
         });

   });
});

Hope this helps!

Thanks for your investigation! Giving the image a fixed width definitely helped solve the problem

[Firefox background image jumps after scale]

I think in my 40.x.x Firefox there was no problem but after getting the latest version I saw what you mean. I changed a bit so the width was set in pixels but I still get some weird moves sometimes in Firefox. Hard to see but sometimes it seems it moves one pixel and than one back.

 

So also tried if force3D:true or autoRound:false helped but no luck so far. If it's just the latest version of FireFox I'm not sure if you should put much energy into it.

 

My thingie: 

See the Pen oxoNGB by OzBoz (@OzBoz) on CodePen

Thanks for your investigations OzBoz - it's really a strange bug!

[Firefox background image jumps after scale]

 

Hi hanslibuzli 

 

pls add tiny amount of rotation to your tween , like this :

TweenLite.set(".band", {  scale : 1 , rotation:0.01 });

 

Thanks for you suggestion Diaco. Unfortunately rotation does not solve the jump issue.

[Firefox background image jumps after scale]

Hi all

 

I have a unusual bug in Firefox (45.0.1) and was wondering if any of you might have a idea or helpful pointer.

 

The problem is fairly simple. I would like to scale a div which has a background image set to cover, unfortunately in Firefox after the tween you see a jump of the background image. I can fix the jump by giving the div a fixed pixel width however I would like to keep it percentage based.

 

Thanks for your help!

See the Pen zqPOJb by anon (@anon) on CodePen