I created a dynamic SVG animation that grows as you hover over it. Since I'm still learning about SVG animations, I encountered some issues with my implementation. The animation is quite straightforward - when hovering over the SVG arrow, the line should extend and the tip of the arrow should move along with it. While this works smoothly on Chrome, I'm facing delays in Firefox and Safari. I've tried various solutions but haven't been able to get it to work consistently across all browsers. Below is my code snippet:
<div className="slider-arrow-down-btn" style={{ cursor: 'pointer' }}>
<Link title="scroll down" to="/#homepage" onMouseEnter={this.handleOnEnter} onMouseLeave={this.handleOnLeave} className="animated-arrow-bottom">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="61" viewBox="0 0 30 61">
<g fill="none" fillRule="evenodd">
<path id="arrow-path-bottom" stroke="#FFF" strokeLinejoin="bevel" strokeWidth="4" d="M2.5 39.5l12.5 20 12.5-20" />
<path id="arrow-line-bottom" fill="#FFF" d={`M17 0v${pathHeight}h-4V0z`} />
</g>
</svg>
</Link>
</div>
Here are the functions associated with the animation:
handleOnEnter = () => {
this.setState({ pathHeight: 100 });
}
handleOnLeave = () => {
this.setState({ pathHeight: 60 })
}
And here is the original svg code snippet:
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="61" viewBox="0 0 30 61">
<g fill="none" fill-rule="evenodd">
<path stroke="#FFF" stroke-linejoin="bevel" stroke-width="4" d="M37 23L49.5 3 49.5 3 62 23" transform="rotate(90 14 14) matrix(0 -1 -1 0 62.5 62.5)"/>
<path fill="#FFF" d="M0 11L60 11 60 15 0 15z" transform="rotate(90 14 14)"/>
</g>
</svg>
The desired outcome is for the line to grow instantaneously upon hovering over the SVG, while the arrow tip moves seamlessly alongside it without any delays. Your insights would be greatly appreciated!