I'm trying to build an animation that scales down a container and rounds the borders. The issue I'm noticing though is that when the container is scaled down, the borders are not rounding properly (looking like they cut off on top and bottom). Below are code snippets that should illustrate the issue more clearly; fair warning, this was pulled from mid-troubleshooting so there are a few erroneous things in there, but the focus should really just be the CSS and what's happening when it's being scaled down. What I'm hoping to find out:
- Why is this happening?
- How can I address it?
Snippet below, but I've also attached a codepen in case it's easier to view over there: https://codepen.io/tganyan/pen/qBYqvLX
const tl = gsap.timeline({paused: false, repeat: 0});
const animatedExample = document.getElementById('example-1');
tl.to(animatedExample, 1, {scaleX: .5, borderRadius: '15px'});.example {
top: 30px;
position: absolute;
width: 300px;
height: 300px;
}
#example-1 {
border: solid 2px darkblue;
}
#example-2 {
border: solid 2px darkred;
border-radius: 15px;
left: 400px;
}<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<html>
<div id="example-1" class="example"></div>
<div id="example-2" class="example"></div>
</html>EDIT: It occurred to me that my initial code snippets had too many distractions in them, so I've made a much more simplified representation of the issue.