I am looking to create a dynamic animation effect for a button within a form. The goal is for the button to move to the center of the form, while simultaneously undergoing a horizontal flip using a scale transform. During the midpoint of this animation, I want the button's contents to change to display a paragraph with an animated SVG and a link.
The provided code snippet partially achieves the desired effect but lacks an initial static position for the button before starting the animation:
var form = $("form")
var button = $("button")
button.on("click", function(){
var x = (form.outerWidth() - button.outerWidth()) / 2;
var y = (form.outerHeight() - button.outerHeight()) / 2;
button.css({
transform: `translateX(${x}px) translateY(${y}px) scaleX(0)`
});
})form {
background: #aaa;
border-radius: 4px;
padding: 20px;
font-size: 25px;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
position: relative;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: absolute;
left: 0;
top: 0;
transition: transform 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<p>Hello World</p>
<button onclick="return false;">Do something</button>
</form>(https://jsfiddle.net/silviubogan/L1ogpf6a/)
I am seeking advice on how to correctly achieve my desired animation effect without disrupting the rest of the form layout. Any suggestions would be greatly appreciated. Thank you.