Using bounce animation on a scaled element

Question

What is the best way to have something scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the div size prior to scaling. PS I want this done in one action, the two buttons were just for the example.

 function myFunction() { var image = document.getElementById('test'); image.style.WebkitTransform = ('scale(2,2)'); } function myFunction2() { var image = document.getElementById('test'); image.classList.remove('bounce'); image.offsetWidth = image.offsetWidth; image.classList.add('bounce') ; }

 div#test { position:relative; display: block; width: 50px; height: 50px; background-color: blue; margin: 50px auto; transition-duration: 1s; } .bounce { animation: bounce 450ms; animation-timing-function: linear; } @keyframes bounce{ 25%{transform: scale(1.15);} 50%{transform: scale(0.9);} 75%{transform: scale(1.1);} 100%{transform: scale(1.0);} }

 <div id='test'> </div> <button class = 'butt' onclick = 'myFunction()'>FIRST</button> <button class = 'butt' onclick = 'myFunction2()'>SECOND</button>

Answer 1

Just a series of jquery animations that change by a set number of pixels should do the trick. You could always use something like parseInt($('#test').css('width')) in the math for how much to change if you want scaled-up objects to bounce more/less

 function scaleUp() { var image = document.getElementById('test'); image.style.WebkitTransform = ('scale(2,2)'); } function bounce() { $('#test').animate({ 'width': "-=20", 'height': "-=20" }, 150); $('#test').animate({ 'width': "+=30", 'height': "+=30", }, 150); $('#test').animate({ 'width': "-=20", 'height': "-=20", }, 150); $('#test').animate({ 'width': "+=10", 'height': "+=10", }, 150); }

 div#test { position:relative; display: block; width: 50px; height: 50px; background-color: blue; margin: 50px auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='test'> </div> <button class = 'butt' onclick = 'bounce()'>Bouncey</button> <button class = 'butt' onclick = 'scaleUp()'>Scale up bouncey</button>

Here's them combined into one with an animation for growing / shrinking:

 function scaleUp() { var image = document.getElementById('test'); image.style.WebkitTransform = ('scale(2,2)'); } function bounce() { const width = parseInt($('#test').css('width')); const height = parseInt($('#test').css('height')); $('#test').animate({ 'width': parseInt($('#test').css('width'))*2.2, 'height': parseInt($('#test').css('height'))*2.2 }, 300); $('#test').animate({ 'width': "-=20", 'height': "-=20" }, 150); $('#test').animate({ 'width': "+=30", 'height': "+=30", }, 150); $('#test').animate({ 'width': "-=20", 'height': "-=20", }, 150); $('#test').animate({ 'width': "+=10", 'height': "+=10", }, 150); $('#test').animate({ 'width': width, 'height': height }, 300); }

 div#test { position:relative; display: block; width: 50px; height: 50px; background-color: blue; margin: 50px auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='test'> </div> <button class = 'butt' onclick = 'bounce()'>Bouncey</button>