I'm facing an issue with my animated SVG image sliding from the left into the frame.
The problem is, the animation starts at the object's left edge instead of the page's left edge.
Is there a way to make the animation start at the edge of the page?
Adding margin or padding to the object only moves the animation further away from the page's edge.
While adding margin or padding inside the SVG achieves the goal, it cuts off the image on the right side.
HTML Body:
<body style="background:#3F6184;">
<div class="full-w">
<object class="hi" data="static/images/Hi.svg"></object>
</div>
</body>
svg:
<svg version="1.1" id="hi" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 160.562 148.92" style="enable-background:new 0 0 160.562 148.92;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{font-family:'MyriadPro-It';}
.st2{font-size:137px;}
.st3{letter-spacing:4;}
#hi {
-webkit-animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: slide-in-blurred-left 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-left {
0% {
-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-in-blurred-left {
0% {
-webkit-transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-filter: blur(40px);
filter: blur(40px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0) scaleY(1) scaleX(1);
transform: translateX(0) scaleY(1) scaleX(1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
<text transform="matrix(1 0 0 1 0 114.6699)" class="st0 st1 st2">Hi,</text>
</svg>