veltman / flubber Goto Github PK

Need to add supported versions to docs.

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 🙂

Do you have any examples of how to use this plugin along with greensock?

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.

(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 :)

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.

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

There's a related Chromium issue - https://bugs.chromium.org/p/chromium/issues/detail?id=1108966

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'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)
      ...

Hey guys,

i am having the problem, that two shapes that i interpolate will have a phase inbetween where the shape is filled:

Before:

Inbetween:

After:

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?

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?

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:

• sometimes points are added between the start and end of the path
• the location of the opening is sometimes "moved"

Is this behavior something that could be suppressed with a polyline/unclosed flag??

Thanks!

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

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";```

Hello all,

Any chance we can get reanimated v2 support in this great library ?

Switch to global isFinite and a type check to support IE out of the box.

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!

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.

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.

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!

Here i wanna to make this project as fast as possible, for creating plug-in for my project.

To-Do's:

• 1. Converting Curves to Lines, solution here
• 2. Point-A-Long replacement to direct interpolation (improves by 5-15% performance)
• 3. distance replacement to direct Math.sqrt (improves 5%)
• 4. Implementing the change of index
• 5. Implementing the config for disabling topology/split into parts, as this costs at perf

Total performance improvements: 1 (5-50%) + 2 (5-15%) + 3 (5%) = 15%-70% improvements

And some others, that may i change in future

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.

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 ^^

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

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"

I wonder whether it would be possible to morph a set of shapes to another set of shapes? :)

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.

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. :)