Can a SVG Animation be created featuring a progress ring with both the right and left dash offsets moving simultaneously?

Currently in my codepen, I am working on a project where I am using GSAP. If you are unfamiliar with that, no worries - just focus on the dashoffset and dasharray in the SVG circulation path.

You can find this project in Codepen which is part of our premium group. Unfortunately, I cannot afford it so I am exploring the possibility of achieving the desired effect with two dashoffsets. However, it is not working as expected. Here is the comparison between the working version WORKING and the one I created NOT WORKING PROPERLY.

.circle-container__progress {
  fill: none;
  stroke-linecap: round;
  stroke: var(--completion-color);
  stroke-dasharray: 100 100;
  stroke-linecap: square;
  stroke-width: var(--circle-border-width);
  /* // For animations...
  // transition: stroke-dashoffset 1s ease-in-out;
  // will-change: transform; */
}

I suspect there might be something missing in the code or perhaps it's not feasible to animate two variations of dasharray in both directions simultaneously. If that's the case, please suggest any possible alternatives. Thank you for any input.

javascriptanimationsvggsap

Answer №1

Presented below is the SVG-only version with the pathLength set to 100 and the first value in dasharray being a number between 0 and 100, positioned at 6 o'clock after rotating the circle. The offset value is calculated as -(100 - value) / 2.

let c1 = document.getElementById('c1');
document.forms.form01.range.addEventListener('change', e => {
  let value = parseInt(e.target.value);
  c1.setAttribute('stroke-dasharray', `${e.target.value} 100`);
  c1.setAttribute('stroke-dashoffset', `-${(100 - value) / 2}`);
});
<form name="form01">
  <input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
  <circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)" stroke-dasharray="50 100" stroke-dashoffset="-25" pathLength="100" />
</svg>

The CSS animated version can be achieved using the following code:

circle#c1 {
  stroke-dasharray: 0 100;
  stroke-dashoffset: -50;
  animation: animateCircle 4s forwards linear;
}

@keyframes animateCircle {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: -50;
  }
  100% {
    stroke-dasharray: 100 100;
    stroke-dashoffset: 0;
  }
}
<svg width="200" xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 50">
  <circle id="c1" cx="25" cy="25" r="24" stroke-width="2" stroke="orange" fill="none" transform="rotate(90 25 25)"  pathLength="100" />
</svg>

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

Obtaining serverTime from a webpageWould you like to learn

Is it possible to retrieve the serverTime using jquery ajax functions like $.get() or $.post()? I am looking to store this serverTime in a variable that can be utilized later on in javascript. You can access the webpage at: To use the get and post functi ...

javascriptphpjqueryajax

Encountered a Next-Auth Error: Unable to fetch data, TypeError: fetch failed within

I've been struggling with a unique issue that I haven't found a solution for in any other forum. My Configuration NextJS: v13.0.3 NextAuth: v4.16.4 npm: v8.19.2 node: v18.12.1 When the Issue Arises This particular error only occurs in the pr ...

javascripttypescriptauthenticationnext.jsnext-auth

Utilize Vue Component by assigning a computed property to the data source

Trying to assign a computed property value to a component's data in order to fetch and manipulate localStorage data. After mounting the component, I want to monitor changes in the localStorage. If my key is updated, I need to retrieve the new value, ...

javascriptvue.jslocal-storagecomputed-properties

Creating a dynamic JSON array with a single key as an array

After converting data from an excel sheet into a json array, here is the structure: [{ 'booktitle': 'Leading', 'bookid': '56353', 'bookauthor': 'Sir Alex Ferguson' }, { 'booktitle&ap ...

javascriptjsonnode.js

Is it possible for my WebDriver script to detect an event triggered by the webpage?

Is it feasible for my WebDriver script to carry out specific tests after a particular event is triggered on the webpage? Within the WebDriver script, I envision some form of event listener: document.addEventListener("hello", function(){ console.log(" ...

javascriptseleniumselenium-webdriver

Review a roster of websites every half a minute (Revise pages every half an hour??)

Just starting out with HTML coding! Can someone please provide the code that will allow me to save various webpages and automatically cycle through them every 30 seconds? And also ensure that the webpages are updated every 30 minutes. ...

javascripthtml

Spacing issues with inline-block elements when dealing with a large quantity of items

Currently, I am tackling the JS/jQuery Project for The Odin Project and I am confident that my solution is working exceptionally well. However, the issue I am facing is that when dealing with larger amounts of elements (around 40-45 in JSFiddle and 50-52 ...

javascriptjqueryhtmlcss

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

FrontEnd Code import React, { Component, useState, useEffect } from "react"; import Navbar from "../Navbar/Navbar.js"; import BarChart from "../BarChart/BarChart"; import { Chart, Tooltip, CategoryScale, LinearScale, ...

javascriptcssreactjsfrontendbackend

Using only Node.js, demonstrate the image

I want to show an image using only Node.js without involving HTML or ID's. I have been looking for solutions but most examples I find use HTML, which I prefer not to use. Unfortunately, I don't have any code to share, but I'm wondering if th ...

javascriptnode.jsimage

Utilizing Jquery for independently blinking text counters

Whenever the user presses a button, a message is created and blinks 5 times. However, each time the button is pressed, all previous messages also blink along with the new one. The goal is to make only the new message blink individually 5 times upon each bu ...

javascriptjqueryhtmlcss

The addition of the URL # fragment feature to Safari's browser caching system

Currently, I am focused on improving the speed of our website. To achieve this, the client is utilizing ajax to preload the expected next page of the application: $.ajax({url: '/some/real/path', ...}); Upon receiving a response from the server ...

javascriptajaxcachingsafarifragment

Tips for running Scrapy and Selenium on a webpage that utilizes angular JavaScript to serve data

I have been working on a web scraper that follows this process: Visit site A -> click on the buy now button -> redirected to Amazon -> scrape data -> return to site A The issue I am facing is that the site is built using AngularJS, and I am h ...

javascriptseleniumscrapy

CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

After experimenting with CSS3 animation, I encountered an unusual issue. Adding animation-fill-mode to the "parent" <div> caused the width of the "child" <div> to be less than 100% upon completion of the animation. Can anyone shed light on why ...

cssanimation

What is the best method for performing cross-domain queries utilizing ajax and jsonp?

When attempting to send an ajax request to a specific URL, I encountered an error. Below is the code I used: $.ajax({ url: "http://webrates.truefx.com/rates/connect.html?q=ozrates&c=EUR/USD&f=csv&s=n", dataType : 'jsonp', ...

javascriptjqueryajaxcsv

What is the best way to add all the items from an array to a div element?

I am currently facing an issue where only the last object in my array is being added to my div using the code below. How can I modify it to add all objects from the array to my div? ajaxHelper.processRequest((response: Array<Vehicle.Vehicle>) ...

javascripthtmlarraystypescriptappendchild

Are there any JavaScript alternatives to Python's pass statement that simply performs no action?

Can anyone help me find a JavaScript alternative to the Python: pass statement that does not implement the function of the ... notation? Is there a similar feature in JavaScript? ...

javascriptpythonfunctionlexical

"Bootstrap-Wizard: How to troubleshoot the onPrevious function not working when used with an

I have been incorporating a bootstrap wizard into one of my applications, and I have encountered an issue. When attempting to utilize the index position of the tabs to achieve a specific goal, I found that it only works with the next button and not with th ...

javascriptjquerytwitter-bootstrapweb-deploymenttwitter-bootstrap-wizard

Using the clientWidth property in React

While I have a solid background in Javascript, I am relatively new to working with React. In my previous projects where I coded directly in javascript for the browser, I frequently used the following code snippet: width = document.getElementById('elem ...

javascriptreactjssvgdynamicwidth

React is having trouble resolving the path required

Having an issue with the tracking-js library in my project. I'm using React and despite checking my package.json and confirming that the module is installed, I keep receiving errors indicating that the module cannot be found. This is how I am attempti ...

javascriptreactjsnpm

What is preventing me from using bracket notation with a variable to assign a property to an object?

I am a complete beginner when it comes to Vuex, and I am currently facing an issue with assigning a value to a Vuex state, specifically state.map.status.isReady. To make my code more reusable, I decided to create a function called changeMapStatus(state, k ...

javascriptvue.jsvuejs2vuex