Animated SVG Arrow Design

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!

Answer №1

It is best to avoid manually altering the path data of SVGs as it can easily lead to a messy result.

To ensure two elements move separately but at the same time, group them together and manipulate the group as a whole. Consider structuring your SVG like this:

<svg>
  <line {...{ /* Line Properties */ }} />
  <g {...{ /* Transform Properties */ }}>
    <line {...{ /* Line Properties (as above) */ }} />
    <path {...{ /* Arrow Head Properties */ }} />
  </g>
</svg>

Imagine both lines are identical, but by overlaying one on top of the other within the grouped element, when moved it creates the illusion of extension.

In your state for the transform group properties, consider something like this:

const groupProps = isHovered ? { transform: 'translate(0 50)' } : { transform: 'translate(0 0)' };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Are there alternative methods for sharing react components between projects besides relying on npm, rush, and bit?

Looking to utilize React components in various projects, I experimented with rush but encountered issues. Unfortunately, npm is not an option either. I attempted using rush.js for this purpose as well, however it faced functionality problems and we are un ...

I am looking to update the appearance of a button dynamically in Vue.js based on changes to an

Is there a way to toggle a visible button when the array changes? I'm having trouble implementing this. What is the most effective method? Check out my example below: https://codesandbox.io/s/relaxed-poincare-vv6xh?file=/src/components/HelloWorld.vu ...

How to Make Bootstrap 3 Collapse Panels Stand Out with an Active Class

First of all, here is the fiddle link: http://jsfiddle.net/krish7878/h38jn324 I have a simple question. When a panel is clicked and it expands to show its contents, a class 'active' should be added to 'panel-heading'. I came across a ...

Mobile devices not showing the Navbar bootstrap menu

My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...

Issue with accessing Contacts API functionality in Firefox OS application

I have followed all the instructions provided in this documentation, but I keep encountering errors. My testing environment is the "Firefox OS 2.2" simulator. In my manifest file, I have included two permissions as follows: "permissions": { "deskto ...

The AngularJS beginner routing application is malfunctioning and needs fixing

I've been diving into Angular JS but hit a roadblock with a basic angular routing program. I need some guidance on what's going wrong. If you want to check out the complete project code, visit my GitHub repository: https://github.com/ashpratap00 ...

Resolving Unhandled Runtime Errors When Using Components with Dynamic API Calls in NextJS: A Guide to Fixing the Issue

As someone who is new to web development, I am currently working on a web app that makes use of the IGDB API (). The concept behind this website is allowing users to listen to game soundtracks and guess which game they belong to. For selecting a game, the ...

Disable sorting options in the Datatable ColumnFilterWidget

I'm currently working with datatables ColumnFilterWidget and I'd like to prevent the widget from sorting the values displayed in the select box. Despite trying the "bSort": false option of the ColumnFilterWidget, it doesn't seem to have any ...

Navigate between tabs with a single click

Hey there! I'm having trouble putting together a webpage that features a sidebar. I want to make it so that clicking on one of the links at the top will switch the tab and its content accordingly. However, the current code I have isn't working an ...

Enhancing elements in Bootstrap Studio with borders

After exploring the interface of bootstrap-studio, it appears that there is no direct option to add a border to an element. However, this can still be achieved either through custom css code or by utilizing the predefined boostrap border classes. You may r ...

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

Passing a complex variable type in TypeScript to a function without the need to redefine the type

I'm fairly new to working with TypeScript and I've encountered this issue several times. When using tools like Prisma to retrieve data, I often come across values with incredibly complex types. These values contain many attributes, which is perf ...

Superior method to ensure the child element's border overlaps with that of the parent

I am currently working on a project that requires a unique CSS effect: Let me explain exactly what I am trying to achieve: The main element (referred to as the title) has padding and a 2px bottom border. Inside this, there is a child element (known as ti ...

Unable to render Angular charts

Recently, I've been attempting to integrate angular charts using the chart.js bundle sourced from CDN links. The version of Angular being used is 1.5.7 and for chart.js it's 2.1.6. I encountered the following error message: angular.js:13708 T ...

Dealing with query strings within routeprovider or exploring alternative solutions

Dealing with query strings such as (index.php?comment=hello) in routeprovider configuration in angularjs can be achieved by following the example below: Example: angular.module('app', ['ngRoute']) .config(function($routeProvider, $loc ...

Increase the bottom padding or add some extra space to the Bootstrap form or page

I am currently working on enhancing a Bootstrap Form that includes reset/submit buttons positioned at the bottom. A common issue is when iPhone users attempt to click the Submit button, which initially displays Safari icons before requiring an extra tap to ...

Create an input field dynamically by utilizing the append method in jQuery

Concern: As part of an edit page, I am working on appending an input field from a modal window to an existing panel while retaining the format of the rest of the fields. The user is currently able to create and add the new field using the code provided in ...

I'm having trouble getting the burger menu to look and function the way I want in Bootstrap using CSS and HTML

Currently involved in a school project focusing on creating responsive web design. We have achieved almost all of our group's objectives, but I am facing one last hurdle that I am hoping the wonderful community at Stack Overflow can assist me with. I ...

Changing the size on click using Jquery

I'm attempting to make a button shrink another element using jQuery. Here's what I have so far: $( "#img1" ).click(function() { $("#img2").css("-moz-transform:scale", "0.7, 0.7"); }); However, this solution doesn't seem to be functio ...

Is there a way to determine which option is currently highlighted in Internet Explorer before it is actually chosen?

Despite the fact that IE does not support mouse events on <option> elements, it does highlight the option under the mouse cursor when you open a dropdown list. Is there a way in JavaScript to capture this highlighted option as the user moves the mous ...