What do you want to see in Hype?
The ability to change the stroke width on vector-animation and record it.
Second: why can't we dash a path and animate it?
Have you found a workaround for this problem?
To increase the stroke on each frame with opacity changes from 0 > 100% during that frame.
Second: use small DIV's (rectangles) on top of the path to simulate dashes.
Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)
How high of a priority is this for you?
[ ] Nice to Have
[ X] Important
[ ] Can't use Hype without it
This is just not possible out of the box because under the hood a path is just a persistent SVG line Hype applies a clever dash setting too. Check these resources for now:
If you want to transfer a custom setting to a stroke also check out
Following Bugs found investigating this request @jonathan :
If border radius is animated on a regular element and starts at 0 it never shows
Converting an ellipse with a border radius animation to a vector shape creates something totally unexpected / undesired
Undoing the conversion breaks the previous animation as there is now an unwanted offset animation
In general … animating a border width on a SVG element should actually get the above effect. Not a variable stroke width but a general stoke width changing over time so it would be a very welcome addition…
+1 on this request
As feature request falls into the category of arbitrary custom property easing (API) that would translate into an interface to hook up your values like SVG properties … that approach might also solve this and much more.
I would like to add, the 8 SVG Animation in one page, really kill off a CPU after 1,5 min. I will run but Google will not likely like the final website when Audited.
Have the page running in Chrome and Firefox. Both jump over 50% CPU in a short amount of time. Meaning I have to go back from SVG animation to rendered mp4.
What you could also reproduce is the following: Make two vector circles and group these two. Then rotate them from the center 360 degrees. I could not get it to turn in the middle. It was always of by one pixel. Making them egg-rotate. <-- is that even a thing?
UPDATE: It does work 100% with rectangles and ellipses. Vectors seems to make it not work.
I think the later can be avoided by doing it this way: ⓵ Just create a circle ② Group it ③ Rotate it in an animation 360° ④ Add your other elements to the group afterwards
The problem seams to be related to the two circles (in your case one is a wrench not being exactly in the center. Thus, a circle with 51 px diameter would need a 25,5px center. Maybe that solves that at least?!
You're welcome. Here is the experiment I did on centering dead_center.hype.zip (30,9 KB) "DeadCenter1" is the regular group center 50% and 50% of the group dimensions. That might throw off things if you change the group dimensions. In "DeadCenter2" I used the group origin to center elements and set the transformation origin on 0% on each axis on the group. That should be less error prone.
Are you able to send steps to reproduce this or a sample document? I couldn't hit this myself; I suspect there may be some steps where your style is getting to "none."
Likewise, this actually worked fine for me in my basic testing. Can you send a repro document?
Thanks!
This might not be a solvable problem since SVG animations must redraw an entire path and this can be an expensive operation. (Hype does a lot of work to pre-render shape morphs and then just set this data on the SVG during animation times). But if you can send a zip of the .hype document I'd love to take a look.
This is the crux of why the feature is not currently in Hype -- we would need to look across all animations/timelines to determine a max border width and provide adequate padding. This can be easily done but would be a potential performance problem. I do want to solve it, but it will require some faster plumbing .
That might be it… as I was playing around, I got that state. I can't reproduce it now as I removed the element and recreated it I don't have a copy left.
The behavior is that before converting it I was animating the borderline. After going to vector shape the diameter is animated.
I played with this a little more and think I can reproduce now what you hit now; the way to do it is the reverse: start an animation with a border and animate to 0px, which sets the value to "none." Should be an easy fix.
Got it! I assume your expectation was that there would not be a path animation if only the border width was animating? This would hopefully naturally get solved by having an animated stroke for vector shapes.
.