How to path animation via js?

Using JavaScript with Hype
1

How can I animate the length of a vector line using JavaScript? I'm trying to access the path, but somehow I'm not succeeding. In my example, the vector line is at 50% and should be animated to 100%.
my basic script:

	
	var animationDuration = 2; 
	var strokeDashOffsetValue = 100;

	var svgElement = hypeDocument.getElementById('pie_path')
	
    hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
    hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionForward);
    hypeDocument.setElementProperty(svgElement, 'stroke-dashoffset', strokeDashOffsetValue);
    hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionForward);
    hypeDocument.pauseTimelineNamed('animation');
	console.log(strokeDashOffsetValue);

Best regards
Olof

pathanimation.zip (14.9 KB)

2

I´m just starting programming with ChatGPT. This helped me a lot.
Maby also for you:

It seems like you're trying to animate a SVG line using JavaScript and integrate it with Hype's timeline features. Your script currently attempts to control the timeline and apply a static change to the stroke-dashoffset property, but doesn't seem to animate the property over time. To animate the stroke length of a SVG path from 50% to 100% using JavaScript and Hype, you'll need to modify your approach slightly. Here are some steps and a sample script to help you achieve this:

1. Setup Your SVG

Ensure your SVG path has the stroke-dasharray and stroke-dashoffset attributes set up. The stroke-dasharray sets the pattern of the stroke, and stroke-dashoffset controls how much of the stroke is visible starting from the beginning of the path. Initially, set stroke-dasharray to the total length of the path and stroke-dashoffset to half of this value to show 50% of the line.

<svg width="200" height="200">
  <path id="pie_path" d="M50,100 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0"
        fill="none" stroke="black" stroke-width="4"
        stroke-dasharray="314" stroke-dashoffset="157" />
</svg>

2. Animate the SVG Path in JavaScript

Use JavaScript to animate the stroke-dashoffset from its initial value to 0, effectively revealing the entire path. Here's how you could modify your script:

var animationDuration = 2000;  // Animation duration in milliseconds
var initialOffset = 157;  // Initially, half the path is visible
var finalOffset = 0;      // Target, showing the full path

var svgElement = hypeDocument.getElementById('pie_path');
var start = null;

function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    var currentOffset = initialOffset - ((initialOffset - finalOffset) * (progress / animationDuration));

    hypeDocument.setElementProperty(svgElement, 'stroke-dashoffset', currentOffset);

    if (progress < animationDuration) {
        window.requestAnimationFrame(step);
    } else {
        hypeDocument.setElementProperty(svgElement, 'stroke-dashoffset', finalOffset);
    }
}

window.requestAnimationFrame(step);

Explanation:

  • window.requestAnimationFrame(step): This function tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The number of callbacks is usually about 60 times per second.
  • step(timestamp): This function is called repeatedly by requestAnimationFrame. It calculates the current offset of the stroke based on the elapsed time and updates the stroke-dashoffset.
  • progress calculation: This determines how far along the duration we are, and accordingly adjusts the dash offset.

Integration with Hype

You might be using specific Hype functions like startTimelineNamed and continueTimelineNamed for other animations or synchronizing multiple animations. You may adjust the script accordingly to fit within those controls, but the above script provides a standalone solution for animating a SVG path using JavaScript.

Remember, depending on the specifics of your implementation (especially with Hype), you might need to adjust the code to better fit your exact setup.

3

Thanks for your quick replay. ChatGPT is mostly great, but sometimes misleading. This code is not working as described by the machine, also I'm looking for a solution to manage the built in vector tool via java script.

4

Thats what I love about ChatGPT. I makes a lot of assumptions.

Hype hypeDocument.setElementProperty() does not have an stroke-dashoffset

ChatGPT can be helpful but you have to take it with a pinch of salt and test any answers...

1 Like
5

Hi Mark,
that means, there is no js-way to animate this stroke-dash offset property?
In Hans example below he is using:
hypeDocument.setElementProperty(svgPath, 'stroke-dashoffset', toValue, 2.0, 'easeinout');
I'm confused. :neutral_face:

6

your example does not really make clear, what you're trying to achieve.

perhaps this may help: Reveal a svgpath with dash and gap

1 Like
7

So adjusting @strmiska chatGPT code to correctly target the dash property with vanilla js.
Only a slight change..

var animationDuration = 2000;  // Animation duration in milliseconds
var initialOffset = 157;  // Initially, half the path is visible
var finalOffset = 0;      // Target, showing the full path

var svgElement = hypeDocument.getElementById('pie_path');
var start = null;

function step(timestamp) {
    if (!start) start = timestamp;
    var progress = timestamp - start;
    var currentOffset = initialOffset - ((initialOffset - finalOffset) * (progress / animationDuration));

    svgElement.setAttribute( 'stroke-dashoffset', currentOffset);

    if (progress < animationDuration) {
        window.requestAnimationFrame(step);
    } else {
       
        svgElement.setAttribute( 'stroke-dashoffset', finalOffset);

    }
}

window.requestAnimationFrame(step);
1 Like
8

i know, but sometimes useful, if you try coding. i do it by trial and error :slight_smile:

9

But you need to do this before posting it as an answer.. :smile:

2 Likes
10

This thread may be helpful. It gets more involved in later replies, but the gist of it is the decorator.

I extracted the relevant slide from the example:
HypeDashPathDecoratorCharts.hype.zip (46,5 KB)