I am currently working on a mobile site and the animation I'm aiming for is quite specific. First, a large circle will appear, covering the entire screen like a splash screen. Then, this big circle will smoothly transition into a smaller circle in the bottom left corner. At the same time, an image inside the circle will also move towards the bottom left.
The issue I'm facing is that while the circle transitions correctly, the text doesn't move smoothly to the bottom left; it kind of shifts left first before moving down. Below is the code snippet I've been experimenting with:
setTimeout(function() {
let i = document.getElementById("test");
let d = document.getElementById("icon-img");
i.classList.add("active");
d.classList.add("active");
}, 2000);.test {
position: fixed;
left: 0;
bottom: 0;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
transition: all 3s ease;
background: gray;
transform: scale(100);
border-radius: 30px;
left: 20px;
bottom: 20px;
}
.test.active {
transform: scale(1);
transition: all 2s ease;
left: 20px;
bottom: 20px;
}
.wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.myclass {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.before {
display: flex;
align-items: center;
justify-content: center;
transition: all 2s ease-in-out;
width: 50%;
height: 50%;
position: fixed;
font-size: 50px;
}
.before.active {
left: 20px;
bottom: 20px;
width: 40px;
height: 40px;
font-size: 15px;
position: fixed;
transform: translate(0, 0);
}<div class="wrapper">
<div id="test" class="test"></div>
<div class="myclass">
<img src="./logo.svg" id="icon-img" class="before"></img>
</div>
</div>