scaling background image with js animate - got shaking image

scaling background image with js animate - got shaking image

image overlay zoom effect
background image transform: scale
css transform scale blurry image
background image zoom on scroll
css transform: scale text jumping
transform: scale moves element
background image zoom animation css
css background-image transition effects

I have DIV container with background image in it.

When I animate it with JS animate scale - I got shaking effect. How to make it smooth?

$('body').on('click', '#container', function() {
  $("#container").animate({
   "background-size": 1000 + "px"
  }, 4000);
});
#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Something like this might work. It uses css3 transforms to scale things smoothly:

https://jsfiddle.net/21j3hbae/

    .container {
        width: 500px;
        height: 300px;
        margin-top: 100px;
        margin-left: 100px;
        background-color: #eeeeee;


    }

    .container .inner-image {
      width: inherit;
      height: inherit;
      background-repeat: no-repeat;
        background-position: center;
      background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
      transform: scale(0.5);
      transition: all 8s ease;
      background-size: 100% auto;
    }

    .container.animate .inner-image {
      transform: scale(2);
    }

background image shaky on div resize, Instead I've added an extra class for each, which sets the background-image ( and Rather than mix JQuery and CSS transitions I've lumped all the animation   scaling background image with js animate - got shaking image I have DIV container with background image in it. When I animate it with JS animate scale - I got shaking effect.


The shaking is a result of no hardware acceleration being used in repaint. Whenever animating, it is important to pick certain properties to animate to improve this performance. Animating transform is a better choice than background-size.

To achieve the change from smaller to larger I changed the jQuery animate() function to simply a css() change of transforming the scale. The value inside the scale() function is the new size. In this example 2 is equal to 200% of the original size.

$("#container").css({
  "transform": "scale(2)"
});

The added transition property in the CSS controls the duration and any easing on the change. You can place this approach inside a div with overflow: hidden to achieve the background-image effect.

$('body').on('click', '#container', function() {
  // use transform instead of animating background-size
  $("#container").css({
    "transform": "scale(2)"
  });
});
#container {
  width: 500px;
  height: 300px;
  margin-top: 100px;
  margin-left: 100px;
  background-color: #eeeeee;
  background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
  background-repeat: no-repeat;
  background-position: center;
  /* control the transition speed here, the second value is duration */
  transition: all 3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Chrome bug: When I scale an element with background image, the , Chrome bug: When I scale an element with background image, the If I apply the scale animation with CSS transition, it is smooth in Chrome too. 1.1 you will start to see jank (lost frames) and jitter (shake rattle and roll) HTML; CSS; JS The bug report for this is a on going webkit Chrome bug, and the  Make Images Grow and Shrink With JavaScript. we connect the link to the function that’s actually going to scale the image up and down: now let’s animate it! Animating the Images.


Set the background-size for initial state as well, add the easing for animation. This is what I achieved.

   $('body').on('click', '#container', function() {

        $("#container").animate({
            "background-size": 100 + "%"
        }, {duration: 9000,
      easing: "linear"});


    });
    #container {
        width: 500px;
        height: 300px;
        margin-top: 100px;
        margin-left: 100px;
        background-color: #eeeeee;
        background-image: url("https://real-e-expo.com/img/609/m5d2c42466d2e9.jpg");
        background-repeat: no-repeat;
        background-position: center;

        background-size: 10%;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Shaky & Choppy CSS Scale Transform on Background Image, I have a background image that has a parent div with a transform: scale with an the proper pre-fixes added in, but still get a really shaky and choppy animation in ie. I suggest using jQuery to handle your opacity rather than using the CSS3  Images should have the same name structure made of an increasing number series and the same location (e.g., images/Eye-1.svg, images/Eye-2.svg, images/Eye-3.svg, etc.) so that the code can easily


background-size transition on hover causes chrome to “shake , background-size transition on hover causes chrome to “shake” background just use transform, scale. so just instead of setting the bg image to 160% use How to achieve a smooth transition of the element going outside the borderline? maybe you could add an animation to your css with opacity like: .square:focus  Keep in mind that CSS transforms usually have a bug when scaling an element or an image passed a scale factor of 1. That is why usually it is best practice to start with your image or element at its largest size. And then use the GSAP set() method to scale the element (background-image) or image down to zero or whatever. Below a scale factor of 1.


How To Shake an Image, Example. img:hover { /* Start the shake animation and make the animation last for 0.5 seconds */ animation  Well, ultimately I couldn't do $.animate({'transform': 'rotate(5deg)'}) because then rotation and scale couldn't be animated simultaneously or independently. jQuery does not allow for animating multiple-component CSS properties.


Dreamweaver CC: The Missing Manual, ACTIONS BORDER-WIDTH PROPERTY BOX MODEL IDs and, 602 Shake, 606 Slide, 606 images, 609–612 Preload Images action, 609–610 Adobe Communities, 911 Adobe Edge Animate, 129,688 adding animations, 701–704 190–218 Background color, 201 Background image, 202 Border, 202 Colors tab, 202  I was getting some "shaking" unwanted effect in IE11 when scaling up an image (either img or div with background-image). After some playing with it I realised the scaling itself is actually fine. IE11 is capable of using subpixel animation for scale transformation, but it cannot (or it appears to) subpixel animate position of an element.