How do I animate a scale css property using jquery?

Question

I am trying to have a circle div with the class of "bubble" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am having trouble getting it to work. heres my code:

HTML Show bubble ... CSS

.bubble {
    transform: scale(0);
}

Javascript

 $('button').click(function(){
     $('.bubble').animate({transform: "scale(1)"}, 5000, 'linear');
 });

When do you want to scale the item? on hover , on page load or something else? please clear your question. — Krish, Feb 16 '16 at 10:33
You can only animate numeric properties using jq `animate()` method. Your best bet is to toggle a class, handling the CSS transition — A. Wolff, Feb 16 '16 at 10:37

Rory McCrossan · Accepted Answer · 2019-11-12T08:37:25.230

44

You can perform the transition using CSS and then just use Javascript as the 'switch' which adds the class to start the animation. Try this:

$('button').click(function() {
  $('.bubble').toggleClass('animate');
})

.bubble {
  transform: scale(0);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: #C00;
  transition: all 5s;
}

.bubble.animate {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Toggle</button>
<div class='col-lg-2 col-md-2 well bubble'></div>

edited Nov 12 '19 at 08:37

answered Feb 16 '16 at 10:32

Rory McCrossan

331,213
40
305
339

1

I see how this works, but haven't worked out how the animation timing and easing might be controlled. Any clues? – holdenweb Jan 25 '18 at 00:27
1

There's several CSS rules which you can use for this, see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) for more information, and try out the links on the left to read about the available rules. – Rory McCrossan Jan 25 '18 at 08:01

score 21 · Answer 2 · answered Feb 16 '16 at 10:36

Currently you cannot use animate with the transform property see here

However you can add a css transition value and modify the css itself.

var scale = 1;
setInterval(function(){
  scale = scale == 1 ? 2 : 1
  $('.circle').css('transform', 'scale('+scale+')')
}, 1000)

.circle {
  margin: 20px auto;
  background-color: blue;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transform: scale(1);
  transition: transform 250ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle"></div>

score 5 · Answer 3 · edited Feb 27 '18 at 12:13

Better go with CSS3 Animations. For animation at a frequent interval you can use with browser supporting prefixes(-webkit,-moz,etc.)-

@keyframes fullScale{
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}
.bubble:hover{
    animation: fullScale 5s;
}

Refer this link- http://www.w3schools.com/css/css3_animations.asp

Or the above solution by @Rory is also a good way to addclass on an attached event.

score 4 · Answer 4 · answered Aug 28 '20 at 16:37

Using the step callback and a counter. Here the counter is just the number 1.
'now' will be 0 to 1 over 5000ms.

$('.bubble').animate({transform: 1},
{duration:5000,easing:'linear',
step: function(now, fx) {
$(this).css('transform','scale('+now+')')}
})

Vanilla JS animate method (supported in modern browsers, no IE)

https://drafts.csswg.org/web-animations-1/#the-animation-interface

$('.bubble').get(0).animate([{"transform": "scale(1)"}],
{duration: 5000,easing:'linear'})

This is the most useful when you are using dynamic positioning and animating to something that cannot be set with CSS — user875479, Apr 08 '21 at 21:22

score 2 · Answer 5 · answered Oct 08 '17 at 03:01

2

You can use Velocity.js. http://velocityjs.org/ For example:

$("div").velocity({
  "opacity" : 0,
  "scale" : 0.0001
},1800)

answered Oct 08 '17 at 03:01

shu

186
1
11

How do I animate a scale css property using jquery?

5 Answers5

Linked