veltman / flubber Goto Github PK
View Code? Open in Web Editor NEWTools for smoother shape animations.
License: MIT License
Tools for smoother shape animations.
License: MIT License
Switch to global isFinite
and a type check to support IE out of the box.
It looks like this library is now broken in the latest version of Chromium. Apparently they've conformed to the spec. To repro the issue, simply check out this example in the latest Chromium:
https://veltman.github.io/flubber/demos/basic-svg.html
Uncaught DOMException: Failed to execute 'getPointAtLength' on 'SVGGeometryElement': The element is in an inactive document.
Looks like the source of the problem is that we can no longer call
Line 84 in 0cadadf
Lines 94 to 108 in 0cadadf
There's a related Chromium issue - https://bugs.chromium.org/p/chromium/issues/detail?id=1108966
Hello, I send to you a message because It was hapened a strange thing when I used your plugin typical...
I follow all your tutorial, and the animation work great until 5 minutes, the animation become very fast and fast and I don't understand why , I try with several navigator and I have the same problem...
I send to you a video to show you : https://youtu.be/zsOzF6gpqsc
And I show you my code :
import React from 'react';
// import scss
import './home.scss';
// import typical animation
import Typical from 'react-typical';
class Home extends React.Component {
state = {
}
render() {
return (
<div id="home">
<div id="home-presentation">
<h1 id="home-title">Anaïs Nisimov</h1>
<p id="home-paragraph">Je suis{' '}
<Typical
id="home-profil"
steps={['artiste sonore et numérique', 2000, 'développeuse web Junior', 2000]}
loop={Infinity}
wrapper="b"
/>
</p>
</div>
<div id="home-ContainerImage">
<img id="home-image" src="src/assets/images/logoecoute1_copie.png" alt="logohome" size="small" />
</div>
</div>
);
}
}
export default Home;
If you see something I mised, please let me know
PS: thanks for the tutorial ^^
Hello @veltman, amazing job, seems works fine in most case.
I've made svg-morphing and other tools 2-year ago which based on snapsvg and d3.js (path tween demo), then amazing @colinmeinke made the wilderness.js, i replaced code with wilderness.js and second demo still d3.js and now seem i can change second way with this way, my project was closed-source due of more peoples told like i stole code from gsap morphsvg, and removed from github. name has been unim.js, superanimation.js, sajs, etc...
I will credit project in comments of js, whenever i am use. I have all of code including moveIndex (wilderness.js), just using add
and normalise
for get better result. Thanks for work.
I'd like to simplify the code as has much unnecessary dependecies that can be with simply code or other small deps, your morphing looks nice and best because there has pieceOrder
function that does the job nice and orders everything in right and fast.
Can we use flubber to animate from SVG shape (like rect, circle) to path?
If it is possible can someone share an example or code snippet rearging that.
Or is there some way to animate many circle to topojson map?
Thanks
I get this error with React Native.
Building JavaScript bundle: error
TransformError: /Users/RONIN/ReactNativeProjects/react-native-examples/node_modules/flubber/build/flubber.min.js: Unknown plugin "add-module-exports" specified in "/Users/RONIN/ReactNativeProjects/react-native-examples/node_modules/flubber/package.json" at 0, attempted to resolve relative to "/Users/RONIN/ReactNativeProjects/react-native-examples/node_modules/flubber"
Do you have any examples of how to use this plugin along with greensock?
Right now Flubber returns massive path strings with lots of tiny straight-line segments whose vertices are specified to full double-precision floating point, converted to decimal for printing, which results in 16-digit decimals. This is unnecessarily precise, since (a) conforming SVG renderers only need to support single precision (no more than 8 digits) and (b) anything more than a few digits is visually indistinguishable.
I'd recommend using no finer than maybe 2 digits beyond the specified maxSegmentLength
.
Hi! Great library. I've been using it for years.
Some time ago I needed the same logic in other non-js projects, so I ended up porting it to Python and dart.
Not sure what is your policy regarding ports to other languages, e.g. some projects mention them in their readme
. Just wanted to let you know that they exist 🙂
Hey guys,
i am having the problem, that two shapes that i interpolate will have a phase inbetween where the shape is filled:
That's the code:
const paths = {
circleOutline:
'M77,5A72,72,0,1,1,5,77,72.08,72.08,0,0,1,77,5m0-5a77,77,0,1,0,77,77A77,77,0,0,0,77,0Z',
rectangleOutline:
'M102.73,5A46.33,46.33,0,0,1,149,51.27v51.46A46.33,46.33,0,0,1,102.73,149H51.27A46.33,46.33,0,0,1,5,102.73V51.27A46.33,46.33,0,0,1,51.27,5h51.46m0-5H51.27A51.26,51.26,0,0,0,0,51.27v51.46A51.26,51.26,0,0,0,51.27,154h51.46A51.26,51.26,0,0,0,154,102.73V51.27A51.26,51.26,0,0,0,102.73,0Z',
};
const interpolator = interpolate(paths.circleOutline, paths.rectangleOutline);
<path d={interpolator(0.7)} />
What am i doing wrong?
Need to add supported versions to docs.
Hi there
Nice lib!
I'm getting this error while using normalised coordinates:
TypeError: Polygons must have at least three points.
Here the live test:
https://runkit.com/abusedmedia/593e75ced98c590011feaed9
Keep it up!
Hello. Firstly, thanks very much for the work you've done to create flubber.js. It works fantastically and is a huge help.
I'm wondering how to run multiple instances of flubber.js on one DOM. I apologize beforehand if this is very obvious, but I've attempted a few things and struggled a bit and haven't been able to identify a way to allow this to happen. It appears the code identifies anything that is a path
and removes each one except the first one. I tried to assign the different paths a class and use the d3 selector (i.e. d3.selectAll("path").filter(".nameOfClass");
with no luck. If you could provide any advice or suggestions it would be greatly appreciated. Thanks for your time.
I'll preface this with the admission it could be a bug in webpack/transpilation process but I'm not sure.
I was attempting to use flubber in an app created with create-react-app. I noticed some of my animations had ugly transitions when using flubber. I attempted to reproduce using a bare minimum example but was unable. After a bit of banging my head, it seemed flubber didn't work correctly for me when loaded via an es6 import (alongside webpack/babel) but did work when loaded via a normal script tag.
Here's a link to my demo: https://nthitz.github.io/flubbertest/index.html the top (broken) animation is using flubber loaded through es6 imports. The bottom animation looks more what I desire but I'm having to load flubber via a script tag.
I copied the basic demo from here https://veltman.github.io/flubber/demos/basic-svg.html and added my own paths that were causing problems (Rings). My HTML is here https://github.com/nthitz/flubbertest/blob/master/public/index.html and it has two identical SVGs with different #ids
.
My JS is here https://github.com/nthitz/flubbertest/blob/master/src/index.js basically I just call the same flubber demo once using the flubber loaded via ES6 and once with the flubber loaded via the script tag. End up with vastly different behavior. This demo doesn't actually use React, just using CRA for the quick webpack/babel setup.
Any idea if this is a flubber issue or something happening with the trasnspilation? Thanks!
(i already reguested something similar for KUTEjs here)
i'd like to use (emphasis on await
) so the main thread doesnt need to wait on the interpolation:
var interpolator = await flubber.interpolate(triangle, pentagon);
It'd be great to have typings for this library, so it can be used w/ Typescript.
I can have a go at building the typings myself, but no promises on their quality :)
Thanks for this amazing library!
Flubber works great for polygons but we're also trying to use it to transition a polyline. This mostly works except two issues:
Is this behavior something that could be suppressed with a polyline/unclosed flag??
Thanks!
I wonder whether it would be possible to morph a set of shapes to another set of shapes? :)
In your code
node_modules/flubber/src/svg.js (2:9)
1: import Path from "svgpath";
2: import { svgPathProperties } from "svg-path-properties";
^
3: import normalizeRing from "./normalize.js";
4: import { isFiniteNumber } from "./math.js";
svPathProperties is not an exported name , the correct import is
2: import svgPathProperties from "svg-path-properties";
^
3: import normalizeRing from "./normalize.js";
4: import { isFiniteNumber } from "./math.js";```
Hey! Just wondered what the support out the box for this library is? I'm having some issues on IE11 where the entire site isn't rendering with the following console error
Unexpected call to method or property access
It doesn't give me much more to go off other than mentioning Symbol
a few times, and the error disappears if i remove flubber.
Any help would be hugely appreciated.
Thanks!
I think it would be helpful if the documentation gave folks some sense of the performance of the interpolations with the segment options so they could plan accordingly. Right now I feel like I'm evaluating on a case-by-case basis which probably doesn't make sense for everyone.
I'm trying to do some transitions on the topojson/world-atlas
110m map and finding that some of the more complicated geographies break a lot of the time when calling flubber.combine
.
I've got a reproducible block up here [gist].
If you add e.g. the United States back in (by no longer filtering out id=840
in line 46) it'll break, saying Uncaught RangeError: Can't collapse topology into 10 pieces.
. Changing maxSegmentLength
can make things better or worse, causing more or fewer countries to break (but I've yet to find a value that works for all of them).
Also, thanks for the awesome library! I've been eagerly watching your bl.ocks
for a while and wanting to give these transitions a try, and this makes it so easy to do.
By default, flubber.interpolate()
will return the original start and end shapes at t=0 and t=1. It might be worth having a method that returns two corresponding path strings / coordinate rings, in case someone wants to use them to smoothly animate in some other context (like a CSS animation).
// fromStr and toStr are mismatched paths
let [from, to] = flubber.align(fromStr, toStr);
// from and to are now path strings with a matching number of points with good rotation for animating
Also not sure whether align()
is the best method name for this.
LMK if this already exists and I just missed it.
A lot of the time a developer will want to morph two path strings but will find it difficult because the path strings may not be compatible with each other. Flubber solves this problem by returning an interpolator that outputs the path string to use at a given time t
, with the original from/to path string being returned at t=0
and t=1
.
This library could potentially be even more useful if there was a way to obtain the compatible/morphable path strings to use at t=0
and t=1
. The raw path strings could then be used using CSS, for example: https://css-tricks.com/many-tools-shape-morphing/#article-header-id-4
Here i wanna to make this project as fast as possible, for creating plug-in for my project.
To-Do's:
Math.sqrt
(improves 5%)index
Total performance improvements: 1
(5-50%) + 2
(5-15%) + 3
(5%) = 15%-70% improvements
And some others, that may i change in future
I'm using flubber in a react component using jest to test. I initialize the interpolator statically:
static readonly interpolator = interpolate(fromShape, toShape, {
maxSegmentLength: 0.1,
});
And call it using react-spring
<Spring
native={true}
from={{ t: 0 }}
to={{
t:
this.state.which
? 1
: 0,
}}
>
{({ t }) => (
<animated.path
d={t.interpolate(
Class.interpolator,
)}
/>
)}
</Spring>
When I run tests the test for this component now fails with this error:
TypeError: r.getTotalLength is not a function
at R (node_modules/flubber/build/flubber.min.js:1:7808)
at Q (node_modules/flubber/build/flubber.min.js:1:7390)
at J (node_modules/flubber/build/flubber.min.js:1:8565)
at Fn (node_modules/flubber/build/flubber.min.js:2:17798)
...
Hi Noah, thanks for releasing this. Very useful.
AFAICT, everything in the git repo is published to NPM, and yet the bulk of it is (again AFAICT) not needed. I would introduce an .npmignore or files array to take care of this.
Does that make sense or am I missing something?
Hello all,
Any chance we can get reanimated v2 support in this great library ?
This isn't a bug report... more just a question. Hope you don't mind. :)
I'm the author of ShapeShifter, an SVG icon animation app. You can see an example video showing how to animate a play icon into a pause icon here: https://www.youtube.com/watch?v=2aq3ljlnQdI
Shape Shifter provides a feature called "auto-fix" which gives "best guess estimates" for path morphing animations, similar to your library. It uses an application of the Needleman-Wunsch algorithm. Right now I only have it working well with single-shape SVGs though.
Flubber looks like it handles multi-shape path morphs pretty well, so I am kind of curious how you approached creating "best guess" animations for paths with different #s of shapes? Thanks in advance if you have any tips. :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.