I'm trying to make a simple animation using translate X on a segment of my svg (while hover on the element). This is my code:
<html>
<style>
.big-dot:hover {
transform: translateX(20px);
animation-duration: 1s;
transition: all 1.5s linear;
display: inline-block;
}
</style>
<body>
<svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
height="49.111" viewBox="0 0 42.534 49.111">
<g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
transform="translate(0 8.696)">
<rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
<path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
transform="translate(-2.371)" fill="#181e41" />
</g>
<g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
<g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
transform="translate(801.374 5626.535) rotate(-90)">
<path id="Path_277" data-name="Path 277"
d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
</g>
<g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
<path id="Path_277-2" data-name="Path 277"
d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
<g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
<path id="Path_275" data-name="Path 275"
d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
fill="#377caa" />
</g>
</g>
</g>
</svg>
</body>
</html>While hovering, the dot is doing a move on the Y axis instead and disappear. How Shall i tackle this? Also, is there a way I could use gsap to animate this considering this svg is inside a css class on a backround image ? Thanks
the issue you're having is that you've selected the wrong element, please select the circle itself, not the group it belongs to, your element is named #Path_277.
<style>
#Path_277:hover {
transform: translateX(20px);
animation-duration: 1s;
transition: all 1.5s linear;
display: inline-block;
}
</style><body>
<svg id="Component_31_4" data-name="Component 31 – 4" xmlns="http://www.w3.org/2000/svg" width="42.534"
height="49.111" viewBox="0 0 42.534 49.111">
<g id="icon_navigation_chevron_right_24px" data-name="icon/navigation/chevron_right_24px"
transform="translate(0 8.696)">
<rect id="Boundary" width="24" height="24" transform="translate(13.423 11.72)" fill="none" />
<path id="_Color" data-name=" ↳Color" d="M3.957,0,2.371,1.81,17.634,16.86,2.733,31.7,3.957,33.72,20.794,16.86Z"
transform="translate(-2.371)" fill="#181e41" />
</g>
<g id="Group_3463" data-name="Group 3463" transform="translate(-780.577 -5591.11)">
<g class='big-dot' id="Component_3_29" data-name="Component 3 – 29"
transform="translate(801.374 5626.535) rotate(-90)">
<path id="Path_277" data-name="Path 277"
d="M0,0A7.686,7.686,0,0,0,7.685-7.687,7.685,7.685,0,0,0,0-15.371,7.685,7.685,0,0,0-7.685-7.687,7.686,7.686,0,0,0,0,0"
transform="translate(16.303 16.303) rotate(-45)" fill="#e05037" />
</g>
<g id="Component_3_30" data-name="Component 3 – 30" transform="translate(803.226 5640.222) rotate(180)">
<path id="Path_277-2" data-name="Path 277"
d="M-4.382-8.765a3.3,3.3,0,0,0,3.3-3.3,3.3,3.3,0,0,0-3.3-3.3,3.3,3.3,0,0,0-3.3,3.3,3.3,3.3,0,0,0,3.3,3.3"
transform="translate(16.303 49.875) rotate(-45)" fill="#e05037" />
<g id="Group_296" data-name="Group 296" transform="translate(9.908 6.811) rotate(-45)">
<path id="Path_275" data-name="Path 275"
d="M-1.325-2.649A2.769,2.769,0,0,0,1.445-5.419,2.77,2.77,0,0,0-1.325-8.188,2.77,2.77,0,0,0-4.094-5.419,2.769,2.769,0,0,0-1.325-2.649"
fill="#377caa" />
</g>
</g>
</g>
</svg>
</body>